如何使用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创建可自定义的动态网格布局？

回答

相关问题