动态地将元素组织到列中

Organize elements into columns dynamically

本文关键字：元素 动态      更新时间：2023-09-26

我需要将未知数量的元素组织成垂直阅读的列。下面的代码非常适合根据每列的固定数量来组织元素，但是我不知道元素的数量，所以我需要将所有元素分为4组(可能是5或6列)。

列1 =前25%的元素
第2列=第二个25%的元素
第3列=第3列
第4列=第4列

$(window).load(function(){
$('.equalChildHeights').setEqualHeights();
var linkNum = 1;
$('.organizeLinks').each(function(){
    if (linkNum <= 10) {
        $(this).addClass('linkCol1');
    } else if (linkNum > 10 && linkNum <= 20) {
        $(this).addClass('linkCol2');
    } else if (linkNum > 20 && linkNum <= 30) {
        $(this).addClass('linkCol3');
    } else if (linkNum > 30 && linkNum <= 40) {
        $(this).addClass('linkCol4');
    } else if (linkNum > 40 && linkNum <= 50) {
        $(this).addClass('linkCol4');
    };
    linkNum++;
});
$('.linkCol1').each(function(){
    $(this).appendTo('.column-1');
});
$('.linkCol2').each(function(){
    $(this).appendTo('.column-2');
});
$('.linkCol3').each(function(){
    $(this).appendTo('.column-3');
});
$('.linkCol4').each(function(){
    $(this).appendTo('.column-4');
});

下面是一个工作示例:

对所有元素进行计数，并设置一个带有百分比的变量。

var linkNum = 1;
var totoalLinksCol = $('.organizeLinks').length;
var linksPerCol = Math.ceil(totoalLinksCol/4);
$('.organizeLinks').each(function(){
    if (linkNum <= linksPerCol) {
        $(this).addClass('linkCol1');
    } else if (linkNum > linksPerCol && linkNum <= linksPerCol*2) {
        $(this).addClass('linkCol2');
    } else if (linkNum > linksPerCol*2 && linkNum <= linksPerCol*3) {
        $(this).addClass('linkCol3');
    } else if (linkNum > linksPerCol*3 && linkNum <= linksPerCol*4) {
        $(this).addClass('linkCol4');
    };
    linkNum++;
});
$('.linkCol1').each(function(){
    $(this).appendTo('.column-1');
});
$('.linkCol2').each(function(){
    $(this).appendTo('.column-2');
});
$('.linkCol3').each(function(){
    $(this).appendTo('.column-3');
});
$('.linkCol4').each(function(){
    $(this).appendTo('.column-4');
});

如果你想把它们分成5列，只需把4改成5。

var linksPerCol = Math.ceil(totoalLinksCol/4);

您正在寻找模数运算符

相关文章：