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和砌体将所有图像放入无缝网格中（大多数情况下，您需要重新排列它们以适应没有空白的尺寸）。您需要更新为isotope 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');
});

同位素布局中的空间

1 个答案: