Настройка ширины и высоты с помощью плагина jQuery isotope

#jquery #height #width #jquery-isotope

#jquery #высота #ширина #jquery-isotope

Вопрос:

Я использую плагин jQuery Isotope, и хотя он у меня работает, я, похоже, не могу заставить его распознавать какие-либо поля.

Я вижу в Firebug, что поля применяются, но элементы просто перекрывают поля (я думаю, потому что isotope использует абсолютное позиционирование).

Я немного поработал с шириной, используя следующее:

 masonry : {
columnWidth : 172
          }
  

но я не мог понять, как заставить высоту работать (я пробовал RowHeight с masonry и masonryHorizontal).

Как мне указать isotope, какие ширины и высоты использовать?

Спасибо

Ответ №1:

Попробуйте использовать этот код:

 $(window).load() instead of $(document).ready()
  

Ответ №2:

Проблема, вероятно, в том, что Isotope выполняет свою работу до загрузки изображений. Используйте этот код:

 var $container = $('#container');

$container.imagesLoaded(function() {
  $container.isotope({
    // options...
  });
});
  

Ответ №3:

У меня была похожая (если не та же самая) проблема; у меня не было вертикального интервала между моими элементами. Убедитесь, что вы включили следующие свойства CSS в свои плиточные элементы:

 .element {
  width: 110px; /*your columnWidth minus 10px */
  height: 110px; /*same as width, for a square grid system*/
  margin: 5px; /*5px here will result in 10px of vertical spacing between tiles*/
  float: left;
  overflow: hidden;
  position: relative;
}
  

Надеюсь, это поможет.