javascript实现仿百度图片的瀑布流加载效果

由于没有服务器，就用一个json字符串作为下拉时加载图片数据的来源了

html:

 *{padding: 0;margin:0;}
 #main{
  position: relative;
 }
 .pin{
  padding: 15px 0 0 15px;
  float:left;
 }
 .box{
  padding: 10px;
  border:1px solid #ccc;
  box-shadow: 0 0 6px #ccc;
  border-radius: 5px;
 }
 .box img{
  width:162px;
  height:auto;
 }




 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 
 
  
   
  
 

JSWallper.js:

window.onload=function(){
 
 waterfall('main','pin');
 
 var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
 
 window.onscroll=function(){
  if(checkscrollside()){
   var oParent = document.getElementById('main');// 父级对象
   for(var i=0;i演示图：


源码下载：https://www.jb51.net/jiaoben/452663.html
演示地址：http://demo.jb51.net/js/2016/JSWallper/