Как избежать пробелов, используя Isotope с макетом Masonry sortby random

Я использую Isotope с компоновкой Masonry и заметил, что иногда между блоком и другим блоком остаются промежутки (также, если есть место для другого блока). но иногда, если я обновляю страницу, все в порядке, и она заполняет все пробелы. (по этой причине я не думаю, что это проблема css) Я использую плавные размеры для элементов, и у меня есть режим sortBy: random.

Нашел, что есть еще скрипт isotope-perfectmasonry, но похоже работает только со старой версией masonry (v1)

это мой код

var $grid = $('.grid').imagesLoaded( function() {
  // init Isotope after all images have loaded
   $('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'masonry',
    sortBy : 'random',
    percentPosition: true,
    masonry: {
      columnWidth: '.grid-sizer',
      gutter: '.gutter-sizer'
    }
  });
});

Возможно ли заполнить все пробелы или это невозможно, потому что это случайно? Любая идея, как я могу вызвать ретрансляцию, если есть какие-то пробелы?


javascript css masonry jquery-isotope jquery-masonry
person mattia    schedule 09.11.2015    source источник
comment
jsfiddle или ссылка были бы полезны.   -  person Macsupport    schedule 10.11.2015
comment
спасибо @Macsupport за ваш ответ, здесь есть codepen codepen.io/mp1985/full/epQJQL если вы откроете страницу в полноэкранном режиме, вы увидите это странное поведение. Вы можете попробовать обновить страницу, и вы можете заметить, что иногда есть пробелы. спасибо   -  person mattia    schedule 10.11.2015

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы избежать пробелов, вы должны использовать режим макета packery Isotope.

Вот codepen, демонстрирующий это.

Единственное отличие состоит в том, что добавлен внешний файл javascript для макета упаковки (https://rawgit.com/metafizzy/isotope-packery/master/packery-mode.pkgd.min.js) и что код Isotope изменен на приведенный ниже.

$('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'packery',
  sortBy: 'random',
  percentPosition: true,
  packery: {
    columnWidth: '.grid-sizer',
    gutter: '.gutter-sizer'
  }
});
person Tovly Deutsch    schedule 05.12.2015