如何使用CSS和JavaScript創建可自定義的動態網格佈局？

我正在處理一個涉及大量CSS的項目。客戶希望在主頁上有一個網格佈局，他希望能夠通過拖放來重新排列UI組件。這些UI組件可以具有不同的大小：1x1,2x2和3x3。當我在所需的新位置放置UI項目時，應將其他組件推到一邊。任何可能的孔應該填充1x1組件。如何使用CSS和JavaScript創建可自定義的動態網格佈局？

How it should work

之前，我已經draged組件
Draging 2x2的組件
中間刪除的組件，這兩個1x1的部件騰出空間和周圍的2x2的適應

請注意，網格的大小不限於8 1x1，但其高度和寬度應該可以擴大並縮小。

我寧可不使用表格，但除此之外，我願意接受建議。現在我剛剛使用了內嵌塊div，我可以通過拖放來切換jQuery DOM對象。效果並不完全符合客戶的要求： How it is now

來源

2013-04-12 Borgen

我用相同的想法做了很多動態佈局。你需要更多地考慮你的下一個塊的浮動行爲是如何停止的，以便它們變得像你想要的那樣正確地重新定位。所以定義一個浮動停止元素是必要的。您的塊將與float:left也許float:right。在某些時候，你會弄清楚，這種行爲必須停止與 CSS

.floatstop { 
    clear: both; //the important code here.. 
    width: 100%; 
    height: 1px; 
    line-height: 1px; 
    margin-top:-1px; 
}

和HTML

<div class="floatstop"></div>

製造誰需要邊界到下一個塊左側的所有塊的地方做得最好（也許是右邊），你必須定義一個基本的佈局，這個佈局的右邊放置的區塊也有空間，邊界空間也可以，否則它會在之前的區塊下浮動。

但有一種更現代的方式！您可以使用CSS3代碼來定義您的佈局。

.columnblock { 
    width: 100%; 
    column-gap: 30px; 
    // for symmetric columned layouts use.. 
    column-count: 3; 
    // or for not symmetric layouts use.. 
    column-width: 280px; 
} 

<div class="columnblock"> 
    <p>Lorem Ipsum</p> 
    <p>another Paragraph</p> 
</div>

還有其他的東西在這裏提及，但如果你創建一個塊，你可以閱讀有關 http://www.w3schools.com/css3/css3_multiple_columns.asp

來源

2013-04-12 11:47:07

，並把它掉到地上應該把一個'div.floatstop'太多，所以你的JavaScript會發現這'div.floatstops'，並且當你將它放在它之前 - 它將被放置在鄰居中，或者如果在floatstop之後它將落在已放好的塊的下方 –

我會測試這個方法並返回結果。 – Borgen

我沒有得到它的工作。你可以在jsFiddle上做一個例子嗎？ – Borgen

如何使用CSS和JavaScript創建可自定義的動態網格佈局？

回答

相關問題