如何使用CSS和JavaScript创建可自定义的动态网格布局？

Question

我正在开发一个涉及大量CSS的项目.客户希望在主页上具有网格布局,他希望能够通过拖放重新排列UI组件.这些UI组件可以具有不同的大小:1x1,2x2和3x3.当我将UI项目放在所需的新位置时,它应该将其他组件推到一边.任何可能的孔应填充1x1组件.

它应该如何工作

1. 在我放弃一个组件之前
2. 拖动2x2组件
3. 将组件放在中间,两个1x1组件可以腾出空间并适应2x2

请注意,网格的大小不限于8 1x1,但高度和宽度应该可以扩展并缩小.

我宁愿不使用表格,但除此之外,我愿意接受建议.现在我刚刚使用了内联块div,我可以拖放来切换jQuery DOM对象.效果并不是客户想要的: 现在如何

Answer 1

我用同样的想法制作了很多动态布局。您需要更多地考虑从一个块到另一个块的浮动行为如何在接下来的块中停止，以便它们按照您想要的方式正确地重新定位。所以定义一个float-stop元素是必要的。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