Каменная кладка/Isotope.js не работает правильно

Question

Я разрабатываю тему wordpress, и я использую изотоп или масонство для макетной компоновки. Также я использую Visual Composer для вставки пользовательских элементов, которые я сопоставил с Visual Composer. У меня есть контейнер, который не имеет стилей, и все эти элементы имеют div с классом «overlay», который абсолютно расположен и имеет 100% ширину и высоту. Цель состоит в том, чтобы помещать в него белый ящик (класс «контент»). Изотоп дал мне тяжелое время в предыдущей теме Wordpress. Я понятия не имею, почему. Вот изображение.

Вот разметка для элемента:

<div class="masonry-item"> 
    <img/> 
    <div class="overlay"> 
     <div class="content"> 
      <!-- Just some text here 
     </div> 
    </div> 
</div> 

ЛЮБЫЕ предложения более чем приветствуется, потому что я не могу заставить его работать в любом случае. Большинство методов компоновки просто заканчиваются перекрытием всех элементов в самом верхнем левом углу контейнера. Да, я пытался использовать ImagesLoaded.js, и это не изменило ситуацию.

Кладка JS:

$(".masonry-grid").isotope({ 
      itemSelector: '.masonry-item' 
     }); 

.masonry-элемент CSS:

.masonry-item { 
    position: relative; 
    margin-bottom: 30px; 
} 

Казалось бы, что если они все имеют одинаковую ширину, как 50% она будет работать безупречно. Как заметил в комментариях Дипак Томас. Но как только я помещаю случайный стиль для каждого элемента, например, 30, 40, 50, 60, 70% ширины, он начинает ломаться. В некоторых случаях он помещал элементы рядом друг с другом, большую часть времени оставляя промежуток между ними, если они не находятся в первой строке, а в других случаях он просто складывает их поверх другого, даже если эти два элемента могут очевидно, должны быть поставлены бок о бок и все еще иметь место, чтобы сэкономить.

EDIT: Пробовал удалить изображение. Нет разницы.

Заранее благодарен!

Answer 1

Проблема в том, что первый элемент кладки берется как опция columnWidth для изотопа. Поэтому просто убедитесь, что первый раз - это самый маленький из ваших столбцов.

Answer 2

Из кода, которым вы поделились, кажется, что кладка не предоставляет размеры по умолчанию для своих элементов.

Для каждой кладки-элемента, дать дополнительный класс

: например

.half { width: 50% } 
.full { width: 100% } 
.pad { padding: 15px } 

И использовать это по пунктам, как вы найдете их кв.

например:

<div class="masonry-item half"> 
    <div class="pad"> 
    <img src="xyz" /> 
    <div class="overlay"> 
     <div class="content">I'm the overlay content</div> 
    </div> 
    </div> 
    </div> 

Это должно решить.

Answer 3

попробовать это:

var $post_masonry = $('.masonry-grid'); 
$(document).ready(function() {   
if ($post_masonry.length) { 

        $post_masonry.isotope({ 
         itemSelector: '.masonry-item', 
         layoutMode: 'masonry', 
         percentPosition: true, 
         masonry: { 
          columnWidth: '.masonry-item' 
         } 

       }); 
     } 
}); 

Рекомендуется использовать imagesloaded.pkgd.min.js применять изотоп, когда изображения уже загружены.

var $post_masonry = $('.masonry-grid'); 
$(document).ready(function() {   
if ($post_masonry.length) { 
       var $masonry = $post_masonry.imagesLoaded(function() { 
        $masonry.isotope({ 
         itemSelector: '.masonry-item', 
         layoutMode: 'masonry', 
         percentPosition: true, 
         masonry: { 
          columnWidth: '.masonry-item' 
         } 
        }); 
       }); 
     } 
}); 

if ($ post_masonry.length) -> не является обязательным. Обычно применяется с динамическим ajax.