JS实现瀑布流

用js实现瀑布流代码,实现下拉过程中图片的自动加载:
效果如下:

![]98]ZI}Y[~1]WE9OFBV}}VA.png](http://upload-images.jianshu.io/upload_images/2618457-922595fae5cfca8a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

简易目录:

JS实现瀑布流_第1张图片
O2AVO_B7(`L4]MB{`[email protected]

下边是js代码:

window.onload = function(){
    imgLocation('container','box');
    var imgData = {"data":[{'src':"02.jpg"},{'src':"03.jpg"},{'src':"05.jpg"},{'src':"06.jpg"}]}
    window.onscroll = function(){
         if(checkFlag()){
            var cparent = document.getElementById('container');
            for(var i=0;i

下边是css代码:

*{
    margin:0px;
    padding:0px;
}
#container{
    position: relative;
}
.box{
    padding: 5px;
    float: left;
}
.img_box{
    padding: 5px;
    border:1px solid #cccccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
}
.img_box img{
    width:150px;
    height:auto;
}

下边是静态页面代码:




    
    Document
    



    
![](images/01.jpg)
![](images/02.jpg)
![](images/03.jpg)
![](images/04.jpg)
![](images/05.jpg)
![](images/06.jpg)
![](images/07.jpg)
![](images/08.jpg)
![](images/09.jpg)
![](images/10.jpg)
![](images/11.jpg)
![](images/12.jpg)
![](images/13.jpg)
![](images/14.jpg)
![](images/15.jpg)
![](images/16.jpg)
![](images/17.jpg)
![](images/18.jpg)
![](images/19.jpg)
![](images/20.jpg)
![](images/21.jpg)
![](images/22.jpg)
![](images/23.jpg)
![](images/24.jpg)
![](images/25.jpg)
![](images/26.jpg)

你可能感兴趣的:(JS实现瀑布流)