三种方式实现瀑布流

最新推荐文章于 2024-05-29 10:08:35 发布

Albert_Tiger

最新推荐文章于 2024-05-29 10:08:35 发布

阅读量560

点赞数

分类专栏： js插件

js插件专栏收录该内容

81 篇文章 0 订阅

订阅专栏

css

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #main {
            -webkit-column-width: 202px;
            -moz-column-width: 202px;
            column-width: 202px;
        }
        .box {
            padding: 15px 7px 0 7px;
            float: left;
        }
        .pic {
            border: 1px solid #ddd;
        }
        .pic img {
            width: 165px;
            padding: 10px;
        }
    </style>
</head>
<body>
<div id="main">

</div>
<script>
    var html='';
    for(var i=0;i<100;i++){
        html+=`<div class="item">
                <div class="pic">
                    <img src="images/${Math.ceil(Math.random()*12)}.jpg" alt="">
                </div>
            </div>`
    }
    document.getElementById('main').innerHTML = html;
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #main { position: relative; margin: auto; background: #f0f0f0; }
        .item { position: absolute; padding: 10px; }
        .pic { padding: 10px; border: 1px solid #666; }
    </style>
</head>
<body>
<section id="main">
    <div class="item">
        <div class="pic">
            <img src="images/7.jpg" alt="">7
        </div>
        <div class="pic">
            <img src="images/9.jpg" alt="">7
        </div>
        <div class="pic">
            <img src="images/1.jpg" alt="">7
        </div>
        <div class="pic">
            <img src="images/6.jpg" alt="">7
        </div>
        <div class="pic">
            <img src="images/12.jpg" alt="">7
        </div>
        <div class="pic">
            <img src="images/8.jpg" alt="">7
        </div>
        <div class="pic">
            <img src="images/11.jpg" alt="">7
        </div>
    </div>
</section>
<script>
    var html='';
    for(var i=0;i<12;i++){
        html+=`<div class="item">
                <div class="pic">
                    <img src="images/${Math.ceil(Math.random()*12)}.jpg" alt="">7
                </div>
            </div>`
    }
    // document.getElementById('main').innerHTML = html;
    waterFall('main', 'item');//调用函数
    window.onresize = function () {
        waterFall('main', 'item');
    };//网页大小改变时同样调用函数
    var dataInt = {"data": [{"src": "images/1.jpg"}, {"src": "images/3.jpg"}, {"src": "images/6.jpg"}, {"src": "images/10.jpg"}]};//暂时使用本地数据
    window.onscroll = function () {//滚动事件
        if (fnScroll()) {//当满足条件时触发
            var oParent = document.getElementById('main');
            for (var i = 0; i < dataInt.data.length; i++) {
                var aChild = document.createElement('div');
                aChild.className = 'item';
                oParent.appendChild(aChild);
                var oBox = document.createElement('div');
                oBox.className = 'pic';
                aChild.appendChild(oBox);
                var oImg = document.createElement('img');
                oImg.src = dataInt.data[i].src;
                oBox.appendChild(oImg)
            }
            waterFall('main', 'item');//调用函数
        }
    };

    function waterFall(parent, child) {
        var oParent = document.getElementById(parent),//父级
            aChild = oParent.getElementsByClassName(child), //子集（IE9以下不支持getElementsByClassName）
            oneWidth = aChild[0].offsetWidth, //原生offsetWidth,包括padding。
            cols = Math.floor((document.documentElement.clientWidth || document.body.clientWidth) / oneWidth),  // 网页宽度/一个元素宽度=列数，Math.floor()表示向下取整。
            aHeight = []; //声明一个空数组来存储每一列的高度
        for (var i = 0; i < aChild.length; i++) {
            if (i < cols) { //i < cols表示是第一行的元素
                aChild[i].style.top = 0; // 第一行top为0
                aChild[i].style.left = i * oneWidth + 'px'; // 第一行left=下标*一个元素的宽度
                aHeight[i] = aChild[i].offsetHeight; // 把第一行每个的高度存进aHeight数组中
            } else {
                var minHeight = Math.min.apply(null, aHeight), // 使用Math.min.apply()得到数组中的最小数，即第一行高度最矮的
                    minIdx = aHeight.indexOf(minHeight); // 获取对应的下标（IE8以上）
                aChild[i].style.top = minHeight + 'px'; // 定位，top为上一行最小的高度值
                aChild[i].style.left = minIdx * oneWidth + 'px'; // left为对应下标*一个元素宽度
                aHeight[minIdx] += aChild[i].offsetHeight; //更新数组，总是最小高度的一列加上后面的元素的高度。
            }//样式布局完成
        }
        var maxHeight = Math.max.apply(null, aHeight);
        oParent.style.height = maxHeight + 'px'; //因为是绝对定位absolute，所以父级没有高度，需要取最高的一列的高度给父级
        oParent.style.width = cols * oneWidth + 'px'; //设置父级宽度
    }

    function fnScroll() {
        var oParent = document.getElementById('main'),//父级
            aChild = oParent.getElementsByClassName('item');
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop, //兼容写法，获取scrollTop
            viewHeight = document.documentElement.clientHeight, //视窗高度（即看到的一屏的高度）
            lastTop = aChild[aChild.length - 1].offsetTop + Math.floor(aChild[aChild.length - 1].offsetHeight / 2);//最后一个子元素距离网页顶部+自身高度的一半，实现未滚动到底就开始加载
        return (lastTop < scrollTop + viewHeight) ? true : false;//到达指定高度后 返回true，触发waterfall()函数 //如果满足条件返回true，否则返回false
    }

</script>
</body>
</html>

jquery

瀑布流-jquery

*{margin:0;padding:0;}
#content{position: relative;margin:0 auto;}
.box{padding:10px;float: left;}
.box img{width: 180px;height:auto;display: block;}