JS原生瀑布流（转，小修改）

最新推荐文章于 2023-03-11 18:41:03 发布
chengzi8173
最新推荐文章于 2023-03-11 18:41:03 发布
阅读量86
点赞数
原文链接：https://my.oschina.net/u/3914215/blog/2980948
版权
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            position: relative;
            margin: 10px auto;
        }

        .img-box {
            width: 312px;
            cursor: pointer;
            box-shadow: 1px 1px 2px #000;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border: 1px solid lightgray;
            position: absolute;
            transition: top .5s, left .5s;
            overflow: hidden;
        }

        .img-box:hover {
            margin: 0 3px 2px 1px;
            box-shadow: 2px 2px 4px #000;
        }

        .img-box img {
            display: block;
            width: 300px;
            margin-top: 5px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
<div id="container">


</div>
</body>
<script>
    (function () {

        var container = document.getElementById('container');
        var oldCols = 0;//老的列数
        var cols = 0;//列数
        var imageWidth = 300;
        var boxBorder = 1;
        var boxPadding = 5;
        var boxMarginRight = 10;
        var boxMarginBottom = 10;
        var boxWidth = imageWidth + boxBorder * 2 + boxPadding * 2;

        var imgInfoList = [
            {src: '/pubuliu/img/1.jpg', width: 673, height: 768},
            {src: '/pubuliu/img/2.jpg', width: 250, height: 250},
            {src: '/pubuliu/img/3.jpg', width: 440, height: 1863},
            {src: '/pubuliu/img/4.jpg', width: 440, height: 436},
            {src: '/pubuliu/img/5.jpg', width: 765, height: 2169},
            {src: '/pubuliu/img/6.jpg', width: 250, height: 250},
            {src: '/pubuliu/img/7.jpg', width: 236, height: 236},
            {src: '/pubuliu/img/8.jpg', width: 440, height: 220},
            {src: '/pubuliu/img/9.jpg', width: 200, height: 200},
            {src: '/pubuliu/img/10.jpg', width: 250, height: 250},
            {src: '/pubuliu/img/11.jpg', width: 250, height: 250},
            {src: '/pubuliu/img/12.jpg', width: 615, height: 592},
            {src: '/pubuliu/img/13.jpg', width: 872, height: 2473},
            {src: '/pubuliu/img/14.jpg', width: 250, height: 250},
            {src: '/pubuliu/img/15.jpg', width: 772, height: 2195},
            {src: '/pubuliu/img/16.jpg', width: 250, height: 250},
            {src: '/pubuliu/img/17.jpg', width: 510, height: 834},
            {src: '/pubuliu/img/18.jpg', width: 440, height: 992},
            {src: '/pubuliu/img/19.jpg', width: 440, height: 449},
            {src: '/pubuliu/img/20.jpg', width: 320, height: 900},
            {src: '/pubuliu/img/21.jpg', width: 716, height: 600},
            {src: '/pubuliu/img/22.jpg', width: 512, height: 1000},
            {src: '/pubuliu/img/23.jpg', width: 250, height: 250},
            {src: '/pubuliu/img/24.jpg', width: 250, height: 250},
            {src: '/pubuliu/img/25.jpg', width: 750, height: 2133},
            {src: '/pubuliu/img/26.jpg', width: 732, height: 903},
            {src: '/pubuliu/img/27.jpg', width: 1024, height: 768},
            {src: '/pubuliu/img/28.jpg', width: 700, height: 622},
            {src: '/pubuliu/img/29.jpg', width: 440, height: 642},
            {src: '/pubuliu/img/30.jpg', width: 700, height: 525},
            {src: '/pubuliu/img/31.jpg', width: 250, height: 250},
            {src: '/pubuliu/img/32.jpg', width: 700, height: 525},
            {src: '/pubuliu/img/33.jpg', width: 658, height: 494},
            {src: '/pubuliu/img/34.jpg', width: 700, height: 525},
            {src: '/pubuliu/img/35.jpg', width: 250, height: 250},
        ];

        var colHeightList = [];  // 每列的高度
        var colLeftList = [];

        /**
         * 创建元素并排列
         * @param imgInfoList
         */
        function fallImages (imgInfoList) {
            var fragment = document.createDocumentFragment();
            var minColHeight, minIndex, boxHeight;
            for (var i = 0; i < imgInfoList.length; i++) {
                // 创建img-box
                var oImgBox = document.createElement('div');
                oImgBox.className = 'img-box';
                var oImg = document.createElement('img');
                oImg.src = imgInfoList[i].src;
                oImgBox.appendChild(oImg);

                boxHeight = parseFloat((imgInfoList[i].height * (imageWidth / imgInfoList[i].width) + boxBorder * 2 + boxPadding * 2).toFixed(2));
                oImg.style.height = parseFloat((imgInfoList[i].height * (imageWidth / imgInfoList[i].width)).toFixed(2)) + 'px';
                oImg.style.width = imageWidth + 'px';
                // 获取最短列高及对应的下标
                minColHeight = Math.min.apply(null, colHeightList);//最小列高
                minIndex = colHeightList.indexOf(minColHeight);//获得第几列
                oImgBox.style.top = (minColHeight + boxMarginBottom) + 'px';
                oImgBox.style.left = colLeftList[minIndex];
                oImgBox.style.height = boxHeight + 'px';
                oImgBox.style.width = imageWidth + boxBorder * 2 + boxPadding * 2 + 'px';
                fragment.appendChild(oImgBox);

                oImgBox.height = boxHeight;
                oImgBox.width = imageWidth + boxBorder * 2 + boxPadding * 2;

                // 更新列高
                colHeightList[minIndex] += (boxMarginBottom + boxHeight);
            }

            container.appendChild(fragment);

            container.style.height = Math.max.apply(Math, colHeightList) + 'px';
        }

        /**
         * 模拟后台返回数据
         * @returns {Array}
         */
        function moreFakeImgInfo () {
            var createCount = 20;
            var moreImgInfoList = [];
            var imgLength = imgInfoList.length;
            // 从原数据随机获取组成新数组
            for (var i = 0; i < createCount; i++) {
                moreImgInfoList.push(imgInfoList[parseInt(Math.random() * (imgLength - 1))]);
            }
            return moreImgInfoList;
        }

        /**
         * 行宽改变重新排列
         */
        window.onresize = function () {//窗口大小变化
            oldCols = cols;
            cols = parseInt((document.documentElement.clientWidth * 0.9 + boxMarginRight) / boxWidth);//计算当前窗口大小能放几列
            container.style.width = (boxWidth * cols + boxMarginRight * (cols - 1)) + 'px';//计算出新的容器宽度
            // 最大可容纳列数改变
            if (oldCols !== cols) {
                var imageBoxList = container.getElementsByClassName('img-box');//
                colHeightList = [];
                colLeftList = [];
                var minColHeight, minIndex;
                for (var i = 0; i < imageBoxList.length; i++) {
                    console.log(imageBoxList[i].height);
                    if (i < cols) {  // 初始化第一行

                        imageBoxList[i].style.top = 0;
                        imageBoxList[i].style.left = (i === 0 ? 0 : (boxWidth + boxMarginRight) * i) + 'px';
                        colHeightList.push(parseFloat((imageBoxList[i].height + boxBorder * 2 + boxPadding * 2).toFixed(2)));
                        colLeftList.push(i === 0 ? '0px' : (boxWidth + boxMarginRight) * i + 'px');
                    } else {  // 对后面的元素重新排列
                        minColHeight = Math.min.apply(Math, colHeightList);
                        minIndex = colHeightList.indexOf(minColHeight);
                        imageBoxList[i].style.top = (minColHeight + boxMarginBottom) + 'px';
                        imageBoxList[i].style.left = colLeftList[minIndex];
                        colHeightList[minIndex] = parseFloat(parseFloat((minColHeight + boxMarginBottom + imageBoxList[i].height + boxBorder * 2 + boxPadding * 2).toFixed(2)));
                    }
                }
                container.style.height = Math.max.apply(Math, colHeightList) + 'px';
            }
        };

        window.onload = function () {
            cols = parseInt((document.documentElement.clientWidth * 0.9 + boxMarginRight) / boxWidth);//计算当前窗口大小能放几列
            container.style.width = (boxWidth * cols + boxMarginRight * (cols - 1)) + 'px';//计算出新的容器宽度

            var boxHeight;
            var fragment = document.createDocumentFragment();  // 创建文档碎片
            for (var i = 0; i < imgInfoList.length; i++) {//循环图片数组
                if (i < cols) {  // 只加载第一行

                    var oImgBox = document.createElement('div');
                    oImgBox.className = 'img-box';
                    var oImg = document.createElement('img');
                    oImg.src = imgInfoList[i].src;
                    oImgBox.appendChild(oImg);

                    boxHeight = parseFloat((imgInfoList[i].height * (imageWidth / imgInfoList[i].width) + boxBorder * 2 + boxPadding * 2).toFixed(2));//图片等比例缩放后的高度+2倍的边框+2倍的补白=div的高度
                    oImgBox.style.top = 0;
                    oImgBox.style.left = (i === 0 ? 0 : (boxWidth + boxMarginRight) * i) + 'px';
                    oImgBox.style.height = boxHeight + 'px';
                    fragment.appendChild(oImgBox);
                    oImg.style.height = parseFloat((imgInfoList[i].height * (imageWidth / imgInfoList[i].width)).toFixed(2)) + "px";
                    oImg.style.width = imageWidth + "px";
                    oImgBox.height = boxHeight;
                    oImgBox.width = imageWidth + boxBorder * 2 + boxPadding * 2;

                    colHeightList.push(boxHeight);
                    colLeftList.push(i === 0 ? '0px' : (boxWidth + boxMarginRight) * i + 'px');
                } else {
                    break;
                }
            }
            container.appendChild(fragment);
            fallImages(imgInfoList.slice(cols));  // 排列余下的元素
        };

        var end = 0;
        var time = 0; // TODO
        /**
         * 下拉展示“新数据”
         */
        window.onscroll = function () {
            if (end) {  // 已展示完
                return;
            }
            var scrolledHeight = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrolledHeight + document.documentElement.clientHeight > Math.min.apply(null, colHeightList)) {
                console.log('create more');
                // TODO 这里需要从后台获取数据
                var newImgInfoList = moreFakeImgInfo();
                fallImages(newImgInfoList);
                if (time++ > 3) {
                    end = 1;
                }
            }
        };

    }());

</script>
</html>
转载于:https://my.oschina.net/u/3914215/blog/2980948