用JavaScript和jQuery实现瀑布流

Posted 2020-09-05 老板丶鱼丸粗面

▓▓▓▓▓▓ 大致介绍

　　在慕课网上学习了用原生js和jQuery实现瀑布流，在这里做个笔记

 

▓▓▓▓▓▓ 用javascript实现

　　基本结构：

    <div id="main">
        <div class="box">
            <div class="pic"><img src="images/1.jpg" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/2.jpg" alt=""></div>
        </div>
                ...
                ...
                ...
     </div>

 

　　基本样式：

    *{
        margin: 0px;
        padding: 0px;
    }
    #main{
        position: relative;
    }
    .box{
        padding: 15px 0 0 15px;
        float: left;
    }
    .pic{
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 0 5px #ccc;
    }

 

　　思路：

　　　　　　1、获取#main下的所有.box

　　　　　　2、计算页面中图片有几列，并设置页面的宽度

　　　　　　3、找出这几列中高度最小的列

　　　　　　4、从第二行开始，设置图片为相对定位，把一张图片放到高度最小列的下面

　　　　　　5、更新列的高度，重复3、4、5步骤，直至图片加载完

　　　　　　6、根据最后一张图片的位置确定是否继续加载图片（懒加载）

 

　　实现：

　　　　1、获取#main下的所有.box

            //将main下的所有class为box的元素取出来
            var oParent = document.getElementById(parent);
            var oBox = getByClass(oParent,box);

        // 根据class获取元素
        function getByClass(parent,clsname){
            var arr = [];//用来存储获取到的所有class为box的元素
            var oElement = parent.getElementsByTagName(‘*‘);
            for(var i=0;i<oElement.length;i++){
                if(oElement[i].className == clsname){
                    arr.push(oElement[i]);
                }
            }
            return arr;
        }

 

　　　　2、计算页面中图片有几列，并设置页面的宽度

            //计算整个页面显示的列数（页面宽/box的宽）
            var oBoxW = oBox[0].offsetWidth;
            var cols = Math.floor(document.documentElement.clientWidth/oBoxW);

            //设置main的宽
            oParent.style.cssText = ‘width:‘ + oBoxW*cols + ‘px;margin:0 auto;‘;

 

　　　　3、找出这几列中高度最小的列

　　　　4、从第二行开始，设置图片为相对定位，把一张图片放到高度最小列的下面

　　　　5、更新列的高度，重复3、4、5步骤，直至图片加载完

            //存储每列的高度
            var hArr = [];

            for(var i=0;i<oBox.length;i++){
                if(i<cols){
                    //第一行图片的高度
                    hArr.push(oBox[i].offsetHeight);
                }else{
                    var minH = Math.min.apply(null,hArr);
                    var index = getMinIndex(hArr,minH);
                    oBox[i].style.position = "absolute";
                    oBox[i].style.top = minH + ‘px‘;
                    //oBox[i].style.left = oBoxW*index+‘px‘;
                    oBox[i].style.left = oBox[index].offsetLeft + ‘px‘;
                    //更新每列的高度
                    hArr[index] += oBox[i].offsetHeight;
                }
            }

        //获取每列高度最小的索引值
        function getMinIndex(arr,value){
            for(var i in arr){
                if(arr[i] == value){
                    return i;
                }
            }
        }

 

　　　　6、根据最后一张图片的位置确定是否继续加载图片（懒加载）

　　　　假设是后台给的数据

            //数据
            var dataInt = {‘data‘:[{‘src‘:‘1.jpg‘},{‘src‘:‘2.jpg‘},{‘src‘:‘3.jpg‘},{‘src‘:‘4.jpg‘}]};

　　

　　　　当滚动条滚动时执行

            //滚动条滚动时
            window.onscroll = function(){
                scrollSlide(dataInt);
            }

　　

　　　　根据最后一张图片的位置，来判断是否进行加载

        //判断是否具有了滚条加载数据块的条件
        function checkScrollSlide(parent,clsname){
            var oParent = document.getElementById(parent);
            var oBox = getByClass(oParent,clsname);
            var lastBoxH = oBox[oBox.length-1].offsetTop + Math.floor(oBox[oBox.length-1].offsetHeight/2);
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var height = document.documentElement.clientHeight || document.body.clientHeight;
            return (lastBoxH < scrollTop + height)? true:false;
        }

 

　　　　加载图片

        //滚动条滚动时执行
        function scrollSlide(dataInt){
            ////判断是否具有了滚条加载数据块的条件
            if(checkScrollSlide(‘main‘,‘box‘)){
                var oParent = document.getElementById(‘main‘);
                //将数据块渲染到当前页面的尾部
                for(var i=0;i<dataInt.data.length;i++){
                    var oBoxs = document.createElement(‘div‘);
                    oBoxs.className = ‘box‘;
                    oParent.appendChild(oBoxs);
                    var oPic = document.createElement(‘div‘);
                    oPic.className = ‘pic‘;
                    oBoxs.appendChild(oPic);
                    var oImg = document.createElement(‘img‘);
                    oImg.src = ‘images/‘ + dataInt.data[i].src;
                    oPic.appendChild(oImg);
                }
                waterfall(‘main‘,‘box‘);
            }

 

▓▓▓▓▓▓ 用jQurey实现

　　用jQuery实现的思路都是一样的，就直接放代码

        $(window).on(‘load‘,function(){
            waterfall();
            var dataInt={‘data‘:[{‘src‘:‘1.jpg‘},{‘src‘:‘2.jpg‘},{‘src‘:‘3.jpg‘},{‘src‘:‘4.jpg‘}]};
            $(window).on(‘scroll‘,function(){
                scrollSlide(dataInt);
            })
        });


        function waterfall(){
            var $oBox = $(‘#main>div‘);
            var oBoxW = $oBox.eq(0).outerWidth();
            var cols = Math.floor($(window).width()/oBoxW);
            $(‘#main‘).css({
                ‘width‘ : cols * oBoxW,
                ‘margin‘ : ‘0 auto‘
            });
            var hArr = [];
            $oBox.each(function(index,value){
                var oBoxH = $oBox.eq(index).height();
                if(index<cols){
                    hArr.push(oBoxH);
                }else{
                    var minH = Math.min.apply(null,hArr);
                    var minHIndex = $.inArray(minH,hArr);
                    $(value).css({
                        ‘position‘ : ‘absolute‘,
                        ‘top‘: minH + 15,
                        ‘left‘ : $oBox.eq( minHIndex ).position().left
                    });
                    hArr[minHIndex] += $oBox.eq(index).height() + 15;
                }
            });
        }

        function checkScrollSlide(){
            var $lastBox = $(‘#main>div‘).last();
            var lastBoxH = $lastBox.offset().top + Math.floor($lastBox.height()/2);
            var scrollTop = $(window).scrollTop();
            var clientH = $(window).height();
            return (lastBoxH < scrollTop + clientH) ? true : false;
        }

        function scrollSlide(dataInt){
            if(checkScrollSlide()){
                $.each(dataInt.data,function(index,value){
                    var $Box = $(‘<div>‘).addClass(‘box‘).appendTo(‘#main‘);
                    var $Pic = $(‘<div>‘).addClass(‘pic‘).appendTo($Box);
                    $(‘<img>‘).attr(‘src‘,‘images/‘ + $(value).attr(‘src‘)).appendTo($Pic);
                })
                waterfall();
            }
        }