javascript - 同位素布局中的空间

Question

我们不明白为什么工作部分布局中有大量额外空间。谁能帮忙？

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

Answer 1

要解决您的 div 在图像之前显示的加载问题，您需要使用 imagesLoaded 加载图像。这可以防止在调用 isotope 之前只显示 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在 isotope 之后，然后设置您的代码，使它们能够组合在一起。

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

});
});

您还必须更改第 349 行:

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