垂直排列div，但如果需要则包装

Question

我试图找出一种在屏幕左侧垂直排列div的方法，但如果浏览器窗口调整大小（即缩小），那么我希望重新排列div以便它们启动填写第二栏。

此外，我想强制执行最少数量的div行，例如，如果您调整浏览器的大小并使其高度非常小，则不会重新安排div占用很多列。

我很确定我会用jQuery做这个，但我不知道从哪里开始寻找并且非常感谢任何指针。到目前为止，在我的研究中，我遇到了一个名为Masonry的插件，但目前尚不清楚这是否符合我的要求。

非常感谢

版

Answer 1

砌体是一个很好的框架，我认为答案是你的问题。 看一下CellsByColumn方法：http://isotope.metafizzy.co/layout-modes/cellsbycolumn.html

您还可以在此处查看代码示例：http://codepen.io/desandro/pen/qAlEy

layoutMode: 'cellsByColumn',
cellsByColumn: {
  columnWidth: 110,
  rowHeight: 110
}

Answer 2

您可以使用css媒体查询将div调整为设备屏幕

Answer 3

感谢您的建议 - 最后我决定发出一个AJAX请求，每次调整浏览器大小时都会将浏览器高度发送到服务器端脚本。

我的服务器端脚本然后执行了一些代数来创建一个HTML表，其中包含基于浏览器高度的一定数量的行和列。然后我在每个表格单元格中放置一个图标。