您的位置: 首页  >  IT文章  >  3种方法实现图片瀑布流的效果（纯JS，Jquery，CSS）

3种方法实现图片瀑布流的效果（纯JS，Jquery，CSS）

分类: IT文章 • 2024-07-09 17:15:07

最近在慕课网上听如何实现瀑布流的效果：介绍了3种方法。

3种方法实现图片瀑布流的效果（纯JS，Jquery，CSS）

1.纯JS代码实现：

HTML代码部分：

<!DOCTYPE html>
<html>
<head>
    <title>watefall layout</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/waterfall.js"></script>
</head>
<body>
    <div id="main">
        <div class="box">
            <div class="pic">
                <img src="images/0.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/1.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/2.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/3.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/4.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/5.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/6.jpg">
            </div>    
        </div>        
        <div class="box">
            <div class="pic">
                <img src="images/7.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/8.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/9.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/10.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/11.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/12.jpg">
            </div>    
        </div>

        <div class="box">
            <div class="pic">
                <img src="images/0.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/1.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/2.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/3.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/4.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/5.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/6.jpg">
            </div>    
        </div>        
        <div class="box">
            <div class="pic">
                <img src="images/7.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/0.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/1.jpg">
            </div>    
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/2.jpg">
            </div>    
        </div>
        </div>    


</body>
</html>
HTML部分 
*{
    margin: 0;padding:0;
}
#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: 
}
.pic img{width: 165px;}
CSS部分 
window.onload=function(){
    waterfall('main','box');
    var dataInt={"data":[{"src":'30.jpg'},{"src":'31.jpg'},{"src":'32.jpg'},{"src":'33.jpg'},{"src":'34.jpg'}]};
    window.onscroll=function(){
         if(checkScrollSlide()){
                 var oParent=document.getElementById('main');
                 // 将数据块渲染到当前页面的尾部
                 for(var i=0;i<dataInt.data.length;i++){
                     var oBox=document.createElement('div');
                     oBox.className='box';
                     oParent.appendChild(oBox);
                     var oPic=document.createElement('div');
                     oPic.className="pic";
                     oBox.appendChild(oPic);
                     var oImg=document.createElement('img');
                     oImg.src="images/"+dataInt.data[i].src;
                     oPic.appendChild(oImg);

                 }
                     waterfall('main','box');
             }
        // checkScrollSlide();
        }
    }
    function waterfall(parent,box){
        //将main下的所有class为box的元素取出来
        var oParent=document.getElementById(parent);
        var oBoxs=getByClass(oParent,box);
        // console.log(oBoxs.length);
        //计算整个页面显示的列数（页面宽度/box的宽度)x.offsetWidth获取一个div的宽度，document.documentElement.clientWidth获取页面的宽度
        var oBoxW=oBoxs[0].offsetWidth;
        var cols= Math.floor(document.documentElement.clientWidth/oBoxW);
        // console.log(cols);
        //设置main的宽度
        oParent.style.cssText=''+oBoxW*cols+'px;margin:auto';
        var hArr=[]; //存放每一行图片高度的数组
        for (var i=0;i<oBoxs.length;i++){
            if(i<cols){
                hArr.push(oBoxs[i].offsetHeight);
            }else{
                var minH=Math.min.apply(null,hArr);
                var minindex=getMinhIndex(hArr,minH);
                oBoxs[i].style.position='absolute';
                oBoxs[i].style.top=minH+'px';
                //获取盒子的left值
                oBoxs[i].style.left=oBoxs[minindex].offsetLeft+'px';
                // oBoxs[i].style.left=oBoxW*minindex+'px';
                hArr[minindex]+=oBoxs[i].offsetHeight;
            }
        }
        // console.log(hArr);
    }
    //根据class获取元素
    function getByClass(parent,clsName){
        var boxArr=new Array(),//用来存储class为box的所有元素
        oElements=parent.getElementsByTagName('*');
        for(var i=0;i<oElements.length;i++){
            if (oElements[i].className==clsName) {
                boxArr.push(oElements[i]);
            }
        }

    return boxArr;
}
//获取高度为最小值在数组中的索引
function getMinhIndex(arr,val){
    for (var i in arr) {
        if (arr[i]==val) {
            return i;
        }
    }
}

//检测是否具备了滚动条加载数据库的条件
function checkScrollSlide() {
    var oParent=document.getElementById('main');
    var oBoxs=getByClass(oParent,'box');
    var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
    var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
    // console.log(scrollTop);
    var height=document.body.clientHeight||document.documentElement.clientHeight;
    return (lastBoxH<scrollTop+height)?true:false;
}
JavaScript部分

2.其他的不用动，只用替换js代码为jquery代码即可

$(window).on('load',function(){
    waterfall();
    var dataInt={"data":[{"src":'30.jpg'},{"src":'31.jpg'},{"src":'32.jpg'},{"src":'33.jpg'},{"src":'34.jpg'}]};
    $(window).on('scroll',function(){
        if(checkScrollSlide){
            $.each(dataInt.data,function(key,value){
                // console.log(key);
                // console.log($(value).attr('src'));
                var oBox =$('<div>').addClass('box').appendTo($('#main'));
                var oPic=$('<div>').addClass('pic').appendTo($(oBox));
                var oImg=$('<img>').attr('src','images/'+$(value).attr('src'));
                oImg.appendTo($(oPic));

            })
            waterfall();
        }
    })
})
function waterfall(){
    var oboxs=$('#main>div');
    var w=oboxs.eq(0).outerWidth();
    var cols=Math.floor($(window).width()/w);
    $('#main').width(w*cols).css('margin','0 auto');
     // console.log(w);
    var hArr=[];
    oboxs.each(function(index,value){
        // console.log(index);
        // console.log(value);
        var h=oboxs.eq(index).outerHeight();//获取第一行的图片的高度
        if(index<cols){
            hArr[index]=h;//把前cols列的高度放在hArr数组中
        }else{
            var minH=Math.min.apply(null,hArr);
            var minHIndex=$.inArray(minH,hArr);//求出minH在hArr中的索引值
            // 把value的dom对象转换成jquery对象
            $(value).css({
                'position':'absolute',
                'top':minH+'px',
                'left':minHIndex*w+'px'
            })
            hArr[minHIndex]+=oboxs.eq(index).outerHeight();
        }
    })
}
function checkScrollSlide(){
    var lastBox=$('#main>div').last();
    var lastBoxDis=lastBox.offset().top+Math.floor(lastBox.outerHeight()/2);
    var scollTop=$(window).scrollTop;
    var documentH=$(window).height;
    return (lastBoxDis<scrollTop+documentH)?true:false;

}
Jquery部分

3.使用CSS3的多栏布局可以实现把图片平铺到桌面上，并结合js加载图片，监测鼠标滑动的，进行图片的加载

#main{
   -webkit-column-width:202px; /*每一列的列宽*/
    -moz-column-width:202px; 
      -webkit-column-gap:5px;
      -moz-column-gap:5px;
}


/*数据块 砖块*/
.box{padding:10px 0 0 15px;}
 .pic{width:165px;
               margin:10px 0;border:1px solid #ccc;
    border-radius: 5px;padding:10px;box-shadow: 0 0 5px #ccc}
 .pic img{width:165px;display: block;}

使用CSS3实现瀑布流，性能好，但是用户体验不好，需要结合JS代码实现拖动滚动条加载的功能。

相关推荐