实现瀑布流的三种方法

部分html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/Pinterest.css"> -->
    <!-- // <script type="text/javascript" src="js/Pinterest.js"></script> -->
    <!-- <script type="text/javascript" src="js/jquery.js"></script>
    // <script type="text/javascript" src="js/Pinterest_jquery.js"></script> -->
    <link rel="stylesheet" type="text/css" href="css/Pinterest_css3.css">
</head>
<body>
    <div id="pic_main">
        <div class="pic_box">
            <div class="pic">
                <img src="Pinterest_img/1.jpg" alt="图片1">
            </div>
        </div>
        <div class="pic_box">
            <div class="pic">
                <img src="Pinterest_img/2.jpg" alt="图片2">
            </div>
            
        </div>
    </div>
</body>
</html>

 

 

其CSS代码

#pic_main{position: relative;}
.pic_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;height:auto;}

原生JS

window.onload=function(){
    waterfall('pic_main','pic_box');
    var dataInt = {'data':[{'src':'1.jpg'},{'src':'4.jpg'},{'src':'7.jpg'},{'src':'17.jpg'}]};
    window.onscroll=function(){
        if (checkScrollSlide) {
            var oparent = document.getElementById('pic_main');
            for(var i=0;i<dataInt.data.length;i++){
                var oBox=document.createElement('div');
                oBox.className='pic_box';
                oparent.appendChild(oBox);
                var oPic=document.createElement('div');
                oPic.className='pic';
                oBox.appendChild(oPic);
                var oImg=document.createElement('img');
                oImg.src='Pinterest_img/'+dataInt.data[i].src;
                oPic.appendChild(oImg);
            }
            waterfall('pic_main','pic_box');
        }
    }
};

function waterfall(parent,box){
    // 获取父元素pic_main
    var oparent = document.getElementById(parent);
    // 获取picbox数组
    var oboxs = getByClass(oparent,box);

    // 计算每个box的宽度
    var oboxw=oboxs[0].offsetWidth;
    // 计算列数
    var cols=Math.floor(document.documentElement.clientWidth/oboxw);
    // 设置main的宽度
    oparent.style.cssText='width:'+cols*oboxw+'px;margin:50px auto';

    // 存放第一列的高度
    var harray=[];
    for (var i=0; i<oboxs.length;i++){
        if(i<cols){
            harray.push(oboxs[i].offsetHeight);
        }else{
            var minH = Math.min.apply(null,harray);
            var index = getMinIndex(harray,minH);
            oboxs[i].style.position='absolute';
            oboxs[i].style.top=minH+'px';
            oboxs[i].style.left=index*oboxw+'px';
            harray[index]+=oboxs[i].offsetHeight;
        }
    }

}

function getByClass(parent,className){
    var oelements=parent.getElementsByTagName('*');
    var boxArray=new Array();
    for (var i=0;i<oelements.length;i++){
        if(oelements[i].className==className){
            boxArray.push(oelements[i]);
        }
    }
    return boxArray;
}

function getMinIndex(array,min){
    for(var i=0;i<array.length;i++){
        if(min==array[i])
            return i;
    }
}

function checkScrollSlide(){
    var oparent = document.getElementById('pic_main');
    var oboxs = getByClass(oparent,'pic_box');
    var lastBoxH=oboxs[length-1].offsetTop+Math.floor(oboxs[length-1].offsetHeight/2);
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.body.clientHeight||document.documentElement.clientHeight;
    return (lastBoxH<scrollTop+height)?true:false;
}

 

JQuery

$(function(){
    waterFull();
    var dataInt = {'data':[{'src':'1.jpg'},{'src':'4.jpg'},{'src':'7.jpg'},{'src':'17.jpg'}]};
    $(window).on('scroll',function(){
        if(checkScrollSlide){
            $.each(dataInt.data,function(key,value){
                var oBox = $('<div>').addClass('pic_box').appendTo($('#pic_main'));
                var oPic=$('<div>').addClass('pic').appendTo($(oBox));
                var oImg=$('<img>').attr('src','Pinterest_img/'+$(value).attr('src')) .appendTo($(oPic));
            });    
            waterFull();
        }
    });
});

function waterFull(){
    var $boxs=$('#pic_main>div');
    var boxW=$boxs.eq(0).outerWidth();
    var cols = Math.floor($(window).width()/boxW);

    $('#pic_main').width(cols*boxW).css('margin','0 auto');
    var hArr=[];
    $boxs.each(function(index,value){
        var h=$boxs.eq(index).outerHeight();
        if (index<cols) {
            hArr[index]=h;
        }else{
            var minH=Math.min.apply(null,hArr);
            var minHIndex=$.inArray(minH,hArr);
            $(value).css({
                'position':'absolute',
                'top':minH+'px',
                'left':minHIndex*boxW+'px'
            });
            hArr[minHIndex]+=$boxs.eq(index).outerHeight();
        }
    });
}

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

CSS3

将之前的css文件换成css3文件

css3形成的瀑布流不能实现延迟加载，还是得靠js实现延迟加载

#pic_main{-webkit-column-width: 202px;-moz-column-width: 202px;-o-column-width: 202px;
-ms-column-width: 202px; column-width: 202px;}

.pic_box{padding: 15px 0 0 15px;}

.pic{padding: 10px;border:1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc; 
width: 165px;}

.pic img{width:165px;height: auto;display: block;}
posted @ 2015-03-31 23:11  小彬同学  阅读(392)  评论(0)  编辑  收藏  举报