過濾 Pinterest 風格的網格

Question

我在要過濾的列中創建了一個 Pinterest 風格的圖像網格。 圖像有 2 個不同的高度，但寬度都相同。

問題是當加載小圖像后的圖像時，它會漂浮在小圖像的正下方，在它之后產生一個難看的間隙。

例如，當您單擊此處的“第 3 類”時： http : //www.designlunatic.com/demos/isotope/最后一個元素卡在最小的元素下方，而我希望它一直向左移動.

我嘗試過使用 isotope、shuffle.js、mixitup 等。這些似乎都是基於具有不同高度和寬度的網格，並產生間隙。

Answer 1

嘗試將布局模式更改為 masonryHorizo​​ntal 以查看是否有幫助。 IE：

$container.isotope({
    filter: '*',
    layoutMode: 'masonryHorizontal'
    animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false,
    }
});

類似這樣的事情我以前也處理過，也懶得說，但是你可能需要下載unminified isotope js，自定義定位才能達到你想要的效果。

這是有關布局模式的文檔，當您對站點有特定需求時，這些文檔會很有幫助。 通常默認的“砌體”是最好的方法，但是當您遇到此類問題時，嘗試一些替代方法會有所幫助：

http://isotope.metafizzy.co/layout-modes.html

我還有另外一個技巧給你。 Isotope 根據它如何理解要使用的大小、形狀和區域來使用絕對定位。 您可以做些什么來欺騙同位素是添加空的 div（基本上是具有可見性的項目：隱藏在樣式中）。 它可以消耗一個空白區域並導致某些東西闖入不同的位置。 但是，社交媒體提要等動態內容可能會使此解決方案不切實際。