javascript实现瀑布流效果

最新推荐文章于 2024-08-01 15:19:04 发布

daisy_Hawen

最新推荐文章于 2024-08-01 15:19:04 发布

阅读量1.8k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/sinat_25127047/article/details/50614613

版权

javascript 专栏收录该内容

60 篇文章 1 订阅

订阅专栏

所谓瀑布流效果：随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，数据块就好像瀑布一样永远流不完，所以叫瀑布流。
目前比较出名的用瀑布流布局的就是蘑菇街和堆糖。
http://www.mogujie.com/
http://www.duitang.com/
大家可以自行去欣赏一下。
index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <script type="text/javascript" src="scripts/script.js"></script>
    <title>瀑布流</title>
</head>
<body>
<div id="main">
    <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/13.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/14.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/15.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/16.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/22.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/23.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/24.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="images/25.jpg"/>
        </div>
    </div>
</div>
</body>
</html>

/**
 * Created by Administrator on 2015/10/26.
 */
window.onload=function(){
    waterfall('main','box');
    var dataInt={"data":[{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'}]};
    window.onscroll=function(){
        if(checkScrollSlide){
            //数据块渲染
            //数据块读取，将图片加入网页中
            console.log('loading');
            var oParent=document.getElementById('main');
            var len=dataInt.data.length;
            console.log("len:"+len);
            for(var i=0;i<dataInt.data.length;i++){
                console.log('loading:img');
                //将图片塞到pic 的div 先塞到box的div
                var oBox=document.createElement('div');
                oBox.className='box';
                oParent.appendChild(oBox);
                var pic=document.createElement('div');
                pic.className='pic';
                oBox.appendChild(pic);
                var oImg=document.createElement('img');
                oImg.src="images/"+dataInt.data[i].src;
                pic.appendChild(oImg);
            }
            waterfall('main','box');
        }
    }
};
function waterfall(parent,box){
    var oParent=document.getElementById(parent);
    var oBox=getByClass(oParent,box);
    var oBoxw=oBox[0].offsetWidth;
    //获取列数
    var cols=Math.floor(document.activeElement.clientWidth/oBoxw);
    console.log(cols);
    //设置main的宽
    oParent.style.cssText='width:'+oBoxw*cols+'px;margin:0 auto;'
    //实现图片排序问题
    var hArr=[];
    for(var i=0;i<oBox.length;i++){
        if(i<cols){
            hArr.push(oBox[i].offsetHeight);//遍历oBox，并将oBox的高存入hArr数组
        }
        else{
            var minH=Math.min.apply(null,hArr);//对hArr数组求最小值
            var index=getMinhIndex(hArr,minH);
            //console.log(index);
            oBox[i].style.position='absolute';
            oBox[i].style.top=minH+'px';
            oBox[i].style.left=oBoxw*index+'px';
            hArr[index]+=oBox[i].offsetHeight;//关键，需要对数组重新进行修改，加进去的图片相当于高度增加
        }
    }
    console.log(hArr);
}
function getByClass(parent, clsName){
    var boxArr=new Array();
        var 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 oBox=getByClass(oParent,'box');
    var lastBoxH=oBoxs[oBox.length-1].offsetTop+Math.floor(oBox[oBox.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;
}