如何避免使用同位素與砌體佈局隨機排列

我正在使用同位素與砌體佈局，我注意到有時會留下一個盒子和另一個盒子之間的空隙（如果有空間可以放入另一個盒子）。但有時，如果我刷新頁面，它是好的，它填補了所有的空白。（因爲這個原因，我不認爲這是一個問題的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

如何避免使用同位素與砌體佈局隨機排列

回答

相關問題