三种方式实现瀑布流

深藏阁楼爱情的钟 2022-05-28 04:05 255阅读 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>
            #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;\}