column-count瀑布流实现左右顺序

希望能帮到你~

没有上滑加载更多效果~

对页面效果的需求：

1.选项卡切换；

2.ul(容器)不限高度；ul里li高度不限；

3.li两列显示；左右横排顺序展示，左1，右2，左3，右4......;（如果不介意排序，不用加js）

你要先写好选项卡，然后，实际代码：

看下你的代码跟ul是不是冲突，如果不冲突，分别把ul复制在要切换的容器里。

html:

<ul class="ul" >
   <li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li>
</ul>

css：

.ul {column-count:2;column-gap: 6px;-webkit-column-count:2;-moz-column-count:2;width: 92%;}
ul li {width:100%;margin-right:2%;margin-bottom:8px;page-break-inside:avoid;-webkit-column-break-inside:avoid;box-sizing:border-box;clear:both;display:inline-block;}

红色文字重要，前两个标红，一个是分2列展示，另一个li不折断展示；后面两个代码，解决：实现两排展示后页面底部出现高度，和第二列第一个li上面留出空白问题。http运行下。

js:

$(".ul").each(function() {
    var temp = []
    var temp1 = []
    var items = $(this).find('li')

    for (var i = 0; i < items.length; i++) {
        if (i % 2) {
            temp1.push(items[i])
        } else {
            temp.push(items[i])
        }

   }
    $(this).empty().append(temp.concat(temp1))
}

)