【简易实用】源生js瀑布流示列

那么那么晴天依旧、

于 2019-07-13 16:00:25 发布

阅读量178

点赞数 1

分类专栏： js 布局文章标签： js 布局

本文链接：https://blog.csdn.net/ONLY_jing_/article/details/95751734

版权

js 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

布局

1 篇文章 0 订阅

订阅专栏

代码片段示列：

<!DOCTYPE html>
<html>
    <head>
        <title>js流布局</title>
        <style>
            *{margin:0;padding:0;}
            li{list-style:none;}
            .list {position: relative;}
            .list .item{ position: absolute;}
            .list img{display:block;width:100%;}
        </style>
    </head>
    <body>
        <div class="warp">
            <ul class="list" id="list">
                <li class="item"><img src="./img/1.jpg" />01</li>
                <li class="item"><img src="./img/2.jpg" />02</li>
                <li class="item"><img src="./img/3.jpg" />03</li>
                <li class="item"><img src="./img/4.jpg" />04</li>
                <li class="item"><img src="./img/5.gif" />05</li>
                <li class="item"><img src="./img/6.jpg" />06</li>
                <li class="item"><img src="./img/7.jpg" />07</li>
                <li class="item"><img src="./img/5.gif" />08</li>
                <li class="item"><img src="./img/6.jpg" />09</li>
                <li class="item"><img src="./img/7.jpg" />10</li>
            </ul>
        </div>
    </body>
</html>
<script>
    function flowObj () {
        this.ImgList = document.querySelector('#list');
        this.itemList = document.getElementsByClassName('item');
    }
    flowObj.prototype.setCol = function () {
        // 获取屏幕总宽度
        var totalWidth = document.clientWidth || document.body.clientWidth;
        // 计算item宽度
        var itemWidth = '';
        // 每行多少张
        var colImg = '';
        switch (true) {
            case totalWidth <= 808:
                // 显示三张
                itemWidth = Math.ceil(totalWidth / (colImg = 3));
            break;
            case totalWidth > 808 && totalWidth <= 1242:
                // 显示五张
                itemWidth = Math.ceil(totalWidth / (colImg = 5));
            break;
            case totalWidth > 1242:
                // 显示七张
                itemWidth = Math.ceil(totalWidth / (colImg = 7));
            break;
            default:
            break;
        }
        // 存高度数组
        var harr = new Array(colImg+1).join('0').split('');
        for ( var i = 0; i < this.itemList.length; i++) {
            var mins = Math.min.apply(null,harr);
            var bol = true;
            this.itemList[i].style.width = itemWidth + "px";
            for (var j = 0; j < harr.length; j++) {
                // 若有相同高度的最小高度
                if (harr[j] == mins && bol) {
                   bol = false;
                   // 设置 top
                   this.itemList[i].style.top = harr[j]+"px";
                   // 设置left
                   this.itemList[i].style.left = j * itemWidth + "px";
                   // 赋值height
                   harr[j] = parseFloat(harr[j]) + this.itemList[i].clientHeight;
                }
            }
        }
    }
    var flow = new flowObj();
    window.onload = function () {
        flow.setCol();
    }
    window.onresize = function () {
        flow.setCol();
    }
</script>

1.没有做封装，简单版本

代码片段说明：

建立两个数组

如：harr --> 保存列的高度值，每个值初始化为0，避免下面循环时做为空等判断。

这个列可根据多少屏幕宽度自己自定义吧。

每列展示多少个即可算出每个li.item的宽度，并赋值。

如：this.itemList ---> 展示的li，这个是操作li的

循环itemList 目的->赋值操作每个列的 left ， top 。

left，top从哪里来 --> harr中来。第二行的第一张图要放在第一行的最小那一列的下方，所以此处要先找harr中的最小高度值，会得到它的索引。left = j * 它的宽度 ,top = harr[j]

每一次循环的找到的最小高度值，要进行‘更新’，需要重新赋予新的高度值（也就是插入进瀑布流图片的高度值）。

总结：

每一张图片要进行三个操作：