如何使同位素columnWidth工作當第一個項目是其他項目的寬度的2倍？

http://isotope.metafizzy.co/docs/help.html說：如何使同位素columnWidth工作當第一個項目是其他項目的寬度的2倍？

第一項突破砌體佈局

砌體佈局模式，如果你遇到了，你重新大小的問題的第一個項目，該項目的所有其餘不再適合一起在網格中，你很可能需要設置columnWidth選項。如果沒有設置columnWidth，砌體佈局模式將爲其列的大小使用第一項的寬度。

$('#container').isotope(
    masonry: { 
    columnWidth: 220 
    } 
});

這就是我目前正在做的。不過，我想有一些CSS媒體查詢更改columnWidth。因此，如果我的第一個同位素項目將具有正常的1x寬度，那麼我只需指定CSS中項目的寬度，同位素將從那裏接收columnWidth並開始工作。但是因爲我的第一個項目的寬度是2x，所以我必須像上面的代碼那樣指定列寬，當然我不能再用CSS來改變它。

所以是有可能，例如：

使同位素從具有1X寬度的第二個項目採取columnWidth時？
做一些破解，所以我會實際上有一個1x寬項目作爲第一個，但會設置隱藏它顯示：無或什麼？
設置同位素columnWidth取第一個項目（2倍寬）減去10px的寬度併除以2？

來源

2013-07-26 Ketri

你可以只使用CSS和媒體查詢來設定元素的大小，然後在Javascript中訪問該值，並用它來設置列寬：

var colWidth = $('.column-width-isotope-element').width(); 

$('#container').isotope(
    masonry: { 
    columnWidth: colWidth 
    } 
});

這樣一來，媒體查詢將在同位素初始化之前進行處理，然後讀取列寬值（用任何選擇器代替單列寬度同位素元素替換.column-width-isotope-element），並初始化該屬性的同位素。

來源

2013-07-26 14:22:18 Ennui

這似乎是一個完美的解決方案，我會馬上嘗試。謝謝！ – Ketri

我建議初始化$（window）.load而不是$（document）.ready以確保在jQuery嘗試訪問寬度值之前，可能會影響元素大小的樣式表和圖像/其他資源已加載。通常我在圖像中使用同位素，因此我總是在window.load中初始化它作爲jQuery imagesLoaded插件的回調（在同位素文檔中有更多信息/代碼示例）。 – Ennui

我試過了，看起來這有同樣的問題。我現在有var colWidth = $（'。column-width-isotope-element'）。width（）;我打印出colWidth。它檢查該類的第一個項目（它也有一個.2x類，寬度爲2倍），並從該類中取值。 – Ketri

我正在使用同位素jquery插件v2.2.2並面臨該問題。我已經添加了一個CSS，它適用於我。

.itl-portfolio-masonry:after { 
    content: ''; 
    display: block; 
    clear: both; 
}

來源

2016-02-11 20:11:25

如何使同位素columnWidth工作當第一個項目是其他項目的寬度的2倍？

回答

相關問題