signed

QiShunwang

“诚信为本、客户至上”

jquery实现瀑布流布局

2021/6/3 17:22:01   来源:

文章目录

  • 前言
  • 效果
  • 实现


前言

实现瀑布流列表布局,要求(列表项高度不统一,每次换行都优先补全上一行)


提示:以下是本篇文章正文内容,下面案例可供参考

效果

最终效果实现的效果在这里插入图片描述

实现

先导入jquery

css

.now{display:flex;justify-content:space-between;padding:0 12px;}
.list{width:45vw;}
.list li{margin-bottom:8px;width:100%;border-radius:5px;background:#ffffff;overflow:hidden;}

html

<div class="now">
    <ul class="list list1" id="now1"></ul>
    <ul class="list list2" id="now2"></ul>
</div><!--/now-->

js


```javascript
// 瀑布流1
var nowHtml1 = '';//第一列html内容
var nowHtml2 = '';//第二列html内容
var height1 = 0;//第一列html元素总高度 都忽略了margin-bottom 不影响
var height2 = 0;//第二列html元素总高度 都忽略了margin-bottom 不影响
list.forEach((item,index) => { //循环数据
    html = `<li id="nowitem` + index + `">
                <div class="pic">
                    <img src="` + item.pic + `" width="100%" />
                    <span class="juli">` + item.juli + `</span>
                    <span class="play"></span>
                </div>
                <div class="info">
                    <h3>` + item.title + `</h3>
                    <p>` + item.reply + `</p>
                    <div class="bottom">
                        <img class="avatar" src="` + item.avatar + `" alt="" />
                        <span>` + item.nickname + `</span>`
    if(item.isLike){
        html +=  `<img class="like" src="./images/theme_reply/2.png" alt="" />
                        <span>` + item.like_num + `</span>
                    </div>
                </div>
            </li>`
    }else{
        html +=  `<img class="like" src="./images/theme_reply/heart.png" alt="" />
                        <span>` + item.like_num + `</span>
                    </div>
                </div>
            </li>`
    }
                      
    if(index==0) { //数据为第一条时放入第一列
        nowHtml1 += html;
        $('#now1').html(nowHtml1);
        height1 += $('#nowitem'+index).height();//修改第一列高度
    }else if(index==1) {//数据为第二条时放入第二列
        nowHtml2 += html;
        $('#now2').html(nowHtml2);
        height2 += $('#nowitem'+index).height();//修改第二列高度
    }else {
        if(height1<=height2){//其他情况的数据都先判断两列高度比来决定放入哪个列
            nowHtml1 += html;
            $('#now1').html(nowHtml1);
            height1 += $('#nowitem'+index).height();
        }else{
            nowHtml2 += html;
            $('#now2').html(nowHtml2);
            height2 += $('#nowitem'+index).height();
        }
    }
})

# 总结

例如:总的来说就是默认第一和第二条数据放第一行,接下来的数据都根据两列的高度对比来决定放的位置,每次放完元素都更新一遍本列的高度,这里忽略了margin-bottom,因为每个元素都有,忽略了不影响。