CSS和JS：如何在網格中誇大平鋪的大小

Question

我精通CSS和JS。 在這個項目上使用jQuery。 我有一個流體網格，由無序列表（帶有'li'標簽）組成。 每個'li'（平鋪）具有相同的寬度和高度。 當瀏覽器擴展或收縮時，磁貼會向下或向上包裹以填充空間。

當用戶點擊圖塊時，我希望圖塊擴展到更大的固定高度和寬度，相當於TWO圖塊寬度和四個圖塊高度。 周圍的瓷磚當然必須移動以適應充氣的瓷磚。 但我需要瓷磚繼續圍繞這個現在更大的瓷磚流動，沒有間隙。

我想知道是否可以使用原生CSS實現瓷磚的最終組成（帶有膨脹的浮動瓷磚），或者我是否需要編寫Javascript以幫助將瓷磚定位在膨脹的瓷磚周圍。

Answer 1

我能想到的最好方法是為選定的li添加一個類，並使用CSS3偽選擇器根據位置應用和清除浮點數。

例如

li.active ~ li:nth-of-type(1n+2) {
    float: left
}

li.active ~ li:nth-of-type(1n+2):after {
    content: '\0a00' // whitespace
    width: 0;
    height: 0;
    line-height: 0;
    clear: left;
}

如果你沒有遇到他們我將解釋選擇器。

/ the ~ ( tilde ) is an adjacent element selector, imagine the following html

<li></li>
<li></li>
<li class="active"></li>
<li></li>
<li></li> 

And css 

li.active ~ li {
    background-color: green;
}

// the ~ would select all the li elements that come after the the occurence of 
// .active element and apply a green background. illustrated below with an *

<li></li>
<li></li>
<li class="active"></li>
<li></li> *
<li></li> *

nth-of-type選擇器允許您選擇匹配元素的獨立兄弟

using previous html

with this css

// the nth-of-type value can also be an equation e.g. 1n + 2
li:nth-of-type(2) {
    background-color: green;
}

<li></li>
<li></li> *
<li class="active"></li>
<li></li>
<li></li>

結合在一起

li.active ~ li:nth-of-type(2) {
    background-color: green;
}

<li></li>
<li></li> 
<li class="active"></li>
<li></li>
<li></li> *

這是一個非常優雅的解決方案，可能需要花些時間來獲得您想要的結果，但您肯定有CSS中的工具來完成它。

以下是CSS3選擇器的完整列表及其功能。

http://www.w3.org/TR/css3-selectors/#selectors

您可能需要深入研究以找到比文檔中提供的更好的使用示例，但至少您將知道要搜索的內容。

顯然現代瀏覽器只支持這一點，但你可以修復IE支持

ie9.js

http://code.google.com/p/ie7-js/

或者，如果該解決方案沒有抓住你的幻想

我強烈推薦以前的jQuery砌體建議

http://masonry.desandro.com/

Answer 2

您是否嘗試為元素的已更改狀態創建新類，並使用jQuery刪除舊類並添加新類？ 一些關鍵詞讓你前進：

.removeClass()
li.oldandbusted {
width:100px;
height:100px;
}

.addClass();
li.newhotness {
width:500px;
height:500px;
}