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

Question

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

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

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

masonry : {
columnWidth : 172
          }

, но я не мог понятьузнать, как заставить работать высоту (я попробовал rowHeight с кладкой и masonryHor Horizontal).

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

Спасибо

Answer 1

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

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

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

Answer 2

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

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

Answer 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;
}

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