Пространства в макете изотопов

Question

Мы не можем понять, почему в макете «Рабочее место» есть большие дополнительные пробелы. Может ли кто-нибудь помочь?

http://new-had.herrmanneasyeditdemo.com/#work

Answer 1

Чтобы решить проблему загрузки с указанием вашего Div, прежде чем ваши изображения, вам необходимо загрузить свои изображения с помощью imagesLoaded. Это предотвращает показ div только перед вызовом изотопа. Поскольку вы используете изотоп v1.56, а не v2, он включен в эту версию изотопа. Измените custom.js (на линии 107) изотопного вызов к этому:

var $container = $('#portfolio-container'); 
$container.imagesLoaded(function(){ 
$container.isotope({ 
    resizable: false, 
    itemSelector : ".item", 
    masonry : { 
     columnWidth : 1, 
     gutterWidth: 1, 
    } 

}); 
}); 

Чтобы исправить ваш вопрос макета является более сложным, так как я не уверен, что вы можете поместить все изображения в бесшовной сетке с использованием изотопом v1. 56 и кладки (чаще всего вам необходимо переставить их для размеров без пробелов). Вам нужно будет обновить до изотопа v2 и загрузить packery layout option после изотопа, а затем установить код как таковой, чтобы они соответствовали друг другу.

var $container = $('#portfolio-container'); 
$container.imagesLoaded(function(){ 
$container.isotope({ 
layoutMode: 'packery', 
itemSelector: '.item' 

}); 
}); 

Вы также должны изменить линию 349:

$(window).resize(function(){ 
    $('#portfolio-container').isotope('layout'); 
});