Я новичок в публикации на stackoverflow, а также использую Codepen; так что, пожалуйста, будьте нежны со мной!
Найдя чудесную работу Дэвида ДеСандро «Масонство», я нашел удивительный «Изотоп». Я пытался выполнить то, что (я считаю) должно быть очень простой задачей сохранения исходного порядка элементов. После того, как я рвал на себе волосы в течение нескольких дней (а также пробовал Masonry Ordered Вита «тасуки» Бруннера), у меня явно что-то не так с моим синтаксисом, и я был бы признателен за любую помощь, пожалуйста.
По сути, у меня есть несколько страниц, каждая из которых содержит (разное) количество «коробок». Каждая коробка будет иметь одинаковую ширину, но разную высоту. Ячейки должны быть в своем первоначальном порядке, а также сохранять этот порядок при изменении размера окна.
ПРИМЕР CODEPEN: Isotope — попытка отсортировать элементы в исходном порядке
Коробки НЕ будут пронумерованы - они пронумерованы в моей Ручке только для иллюстрации.
HTML:
<div id="container">
<div class="prod one"><h1>One</h1></div>
<div class="prod two"><h1>Two</h1></div>
<div class="prod three"><h1>Three</h1></div>
<div class="prod four"><h1>Four</h1></div>
<div class="prod five"><h1>Five</h1></div>
<div class="prod six"><h1>Six</h1></div>
<div class="prod seven"><h1>Seven</h1></div>
<div class="prod eight"><h1>Eight</h1></div>
<div class="prod nine"><h1>Nine</h1></div>
<div class="prod ten"><h1>Ten</h1></div>
<div class="prod eleven"><h1>Eleven</h1></div>
<div class="prod twelve"><h1>Twelve</h1></div>
<div class="prod thirteen"><h1>Thirteen</h1></div>
<div class="prod fourteen"><h1>Fourteen</h1></div>
<div class="prod fifteen"><h1>Fifteen</h1></div>
<div class="prod sixteen"><h1>Sixteen</h1></div>
<div class="prod seventeen"><h1>Seventeen</h1></div>
</div> <!-- /end container -->
CSS (приношу извинения - несмотря на многочисленные попытки, мой пост, похоже, не позволяет мне вставить это как код - хотя он проверяет - см. мой пример CodePen.
JS:
var $container = $('#container');
// init
$container.isotope({
// options
itemSelector: '.prod',
layoutMode: 'masonry'
});
JS ниже "работает", но делает блоки одинакового размера и удаленными друг от друга:
$('.prod').isotope({
getSortData: {
sortBy: 'original-order'
}
});
Я также пытался использовать Masonry Ordered, но получил те же результаты. Я попытался воспроизвести код из демонстрации фотогалереи Vit 'tasuki' Brunner и тоже пытался сделать Pen для этого, но, похоже, не может заставить его работать.
Я также пытался инициализировать Isotope в HTML и думаю, что мой синтаксис в порядке, используя действительный JSON, но снова безуспешно:
<div id="container" class="js-isotope" data-isotope-options='{ "itemSelector": ".prod", "layoutMode": "masonry", "sortBy": "original-order" }'>
Во всяком случае, я уже слишком долго болтал. Я был бы очень обязан, если бы кто-то мог указать мне на очевидное!
Спасибо Веббо
