Question

过去几周我一直在开设一个新网站（feed-monster.com fyi），并且已经在md / lg / s屏幕上每行显示第2条，在xs屏幕上每行显示1条。

我最近进去调整它看起来好一点，第一行= 3列，第二行= 1，第三行（及以上）= 2.

但现在我想让它继续使用该循环或随机设置每行的列数，1-3列。

我遍历行（listi变量），然后计算列应该具有的内容。

    if(listi == 1){
        _col='col-md-4 col-sm-4';
    }else if(listi == 2){
        _col='col-md-4 col-sm-4';
    }else if(listi == 3){
        _col='col-md-4 col-sm-4';
    }else if(listi == 4){
        _col='col-md-12 col-sm-12';
    } else _col='col-md-6 col-sm-6';

    _item=$( "<div>", {
         "class": _col+ " col-xs-12"
    });

我很想读一些关于如何做得更好的想法。

选项1 ）对所有行重复此过程，以便始终为所有记录设置3,1,2。

选项2 ）随机设置每行多少列（1-3），理想情况下防止相同数量的cols重复两次，即没有3,2,2,1。

我可以解决这个问题，但认为它是一个好的帖子，因为我没有真正找到很多搜索。

我正在使用jQuery，所以答案当然可以包括。

谢谢！

Answer 1

为什么不使用砌体，它更美观，更符合每列内容的大小

Answer 2

结束做随机方法试图防止每行重复的列集，它直到最后这样做，因为它超越随机col以确保我们不做更多cols然后利用（可能某种方式来调整）

var perrow=rand(1,3);
var justadded=0;
var used=totalrows;

function builditem(){
    use=(totalrows-used);

    if(justadded == perrow){
        oldperrow=perrow;

        do {
            perrow=rand(1,3);
        }
        while (perrow == oldperrow);

        if(perrow > use) perrow=use;
        justadded=0;
    }

    justadded++;
    used++;

    if(perrow == "1"){
        _col='col-md-12 col-sm-12';
    }else if(perrow =="2"){
        _col='col-md-6 col-sm-6';
    }else if(perrow =="3") _col='col-md-4 col-sm-4';
}

function addmoreitems(data){
                    totalrows=Object.keys(data).length;
                    used=0;
                    use=0;
                    justadded=0;
                    ran=3;
                    if(totalrows < ran) ran = totalrows;
                    perrow=rand(1,ran);
}

每行Bootstrap3随机列

2 个答案: