gpt4 book ai didi

javascript - 计算 DIV 数量,使用 jQuery 添加包装器

转载 作者:行者123 更新时间:2023-11-28 16:07:55 25 4
gpt4 key购买 nike

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

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

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

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

我遇到的问题是,当我 float DIV 时向左,它们显示如下:

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

我解决这个问题的计划是将每一列包装在一个 div 中,并将其 float 到左侧。但由于根据屏幕尺寸的不同,行数可能会有所不同,因此我需要使用 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:看起来我可以使用 .wrap() jQuery 的功能。我只需要弄清楚如何在多个 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。

最佳答案

您可以使用支持 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;
}

演示:http://jsfiddle.net/MkGyu/1

关于javascript - 计算 DIV 数量,使用 jQuery 添加包装器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14114406/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com