如何避免使用同位素与砌体布局随机排列

我正在使用同位素与砌体布局，我注意到有时会留下一个盒子和另一个盒子之间的空隙（如果有空间可以放入另一个盒子）。但有时，如果我刷新页面，它是好的，它填补了所有的空白。（因为这个原因，我不认为这是一个问题的CSS）我使用流体尺寸的项目，我有sortBy：随机模式。如何避免使用同位素与砌体布局随机排列

我发现还有另一个脚本同位素perfectmasonry，但似乎只适用于旧版本砌筑（V1）

这是我的代码

var $grid = $('.grid').imagesLoaded(function() { 
    // init Isotope after all images have loaded 
    $('.grid').isotope({ 
    itemSelector: '.grid-item', 
    layoutMode: 'masonry', 
    sortBy : 'random', 
    percentPosition: true, 
    masonry: { 
     columnWidth: '.grid-sizer', 
     gutter: '.gutter-sizer' 
    } 
    }); 
});

是否有可能填补所有缺口还是不可能的，因为它是随机的？任何想法如果有一些差距，我怎么能触发重新布局？

来源

2015-11-09 mattia

jsfiddle或链接将有所帮助。 – Macsupport

感谢@Macsupport为您的回应，这里有一个codepen http://codepen.io/mp1985/full/epQJQL/如果你以“整页”模式打开页面，你可以看到这种奇怪的行为。您可以尝试刷新页面，并且您可以注意到有时存在间隙。谢谢 – mattia

为了避免差距，您应该使用同位素布局模式packery。

这是一个codepen演示这一点。

唯一的区别是添加了packery布局的外部javascript文件（https://rawgit.com/metafizzy/isotope-packery/master/packery-mode.pkgd.min.js），并且同位素代码被更改为下面的内容。

$('.grid').isotope({ 
    itemSelector: '.grid-item', 
    layoutMode: 'packery', 
    sortBy: 'random', 
    percentPosition: true, 
    packery: { 
    columnWidth: '.grid-sizer', 
    gutter: '.gutter-sizer' 
    } 
});

来源

2015-12-05 04:17:54

如何避免使用同位素与砌体布局随机排列

回答

相关问题