Question

我正在编写一个需要在框中显示内容的网页，如下所示：

[ 1 ] [ 3 ] [ 5 ]
[ 2 ] [ 4 ] [ 6 ]

由于屏幕尺寸不同，有时行数会有所不同。例如，允许显示更多行的屏幕将按如下方式排列：

[ 1 ] [ 4 ]
[ 2 ] [ 5 ]
[ 3 ] [ 6 ]

我遇到的问题是，当我将DIV向左浮动时，它们会显示如下：

[ 1 ] [ 2 ] [ 3 ]
[ 4 ] [ 5 ] [ 6 ]

我解决此问题的计划是将每个列包装在div中，并将其浮动到左侧。但是因为根据屏幕大小可能会有不同的行数，所以我需要使用jQuery来实现这一点。

我已经用jQuery计算了行数，我无法弄清楚如何在包装器中包装一定数量的div。到目前为止，这是我的脚本：

var pageHeight = $("body").innerHeight() - 157; // 157 being the height of the page title
var rowCount = Math.floor(pageHeight / 295); // 295 being the height of each item
var itemCount = $("#itemWrapper").children(".item").length;each item
$("#itemWrapper").height(pageHeight);

所以，如果rowCount = 3，那么我需要在.item中包装每组三个<div class="column"></div>。当然要记住，可能只剩下两个，或者一个.item。

这看起来很简单，但我甚至无法找到从哪里开始。当我对此进行更多研究时，如果我发现任何问题，我一定会更新我的问题。

更新1：看起来我可以使用jQuery的.wrap()功能。我只需要弄清楚如何在多个DIV上使用它。

更新2：我发现这段代码看起来很有希望，但我无法弄清楚如何根据行数进行更改：

for (var i = 0;i < itemCount;i+=3) {
    $(".item").filter(':eq('+i+'),:eq('+(i+1)+'),:eq('+(i+2)+')').wrapAll('<div class="column" />');
};

似乎对于每个额外的div，它需要添加一个更高的一个数字的花药:eq('+(i+1)+')。不知道如何编写那样做的脚本，但我还在研究。如果我只是更改3' to rowCount`，则无法正确关闭所有添加的div。

Answer 1

我还不能发表评论，很抱歉将此作为答案发布。

您应该真正关注使用媒体查询的响应式网页设计。 Here's an article让你开始。

Answer 2

您可以将CSS3列属性用于支持它们的浏览器。

这是一个跨越浏览器的列包装脚本。我使用基于列数的列类的css规则来设置宽度百分比

var colCount = 3,/* hard coded for demo, use your calcs for dynamic*/
    $items = $('.item'),
    items_per_col = Math.ceil($items.length / colCount),
    start = 0;

for (i = 0; i < colCount; i++) {
    var endSlice = start + items_per_col;
    $items.slice(start, endSlice).wrapAll('<div class="col' + colCount + '">');
    start += items_per_col;
}

DEMO：http://jsfiddle.net/MkGyu/1

Answer 3

if (jQuery and wantsColumns) {
   return [Masonry](http://masonry.desandro.com/demos/basic-multi-column.html);
}

使用jQuery计算DIV，添加包装器

3 个答案: