用JavaScript和jQuery实现瀑布流

<div id="main">
 <div class="box">
  <div class="pic"><img src="images/1.jpg" alt=""></div>
 </div>
 <div class="box">
  <div class="pic"><img src="images/2.jpg" alt=""></div>
 </div>
  ...
  ...
  ...
 </div>

*{
 margin: 0px;
 padding: 0px;
 }
 #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;
 }

  //将main下的所有class为box的元素取出来
  var oparent = document.getelementbyid(parent);
  var obox = getbyclass(oparent,box);

// 根据class获取元素
 function getbyclass(parent,clsname){
  var arr = [];//用来存储获取到的所有class为box的元素
  var oelement = parent.getelementsbytagname('*');
  for(var i=0;i<oelement.length;i++){
  if(oelement[i].classname == clsname){
   arr.push(oelement[i]);
  }
  }
  return arr;
 }

  //计算整个页面显示的列数（页面宽/box的宽）
  var oboxw = obox[0].offsetwidth;
  var cols = math.floor(document.documentelement.clientwidth/oboxw);
  //设置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);
  }else{
   var minh = math.min.apply(null,harr);
   var index = getminindex(harr,minh);
   obox[i].style.position = "absolute";
   obox[i].style.top = minh + 'px';
   //obox[i].style.left = oboxw*index+'px';
   obox[i].style.left = obox[index].offsetleft + 'px';
   //更新每列的高度
   harr[index] += obox[i].offsetheight;
  }
  }

//获取每列高度最小的索引值
 function getminindex(arr,value){
  for(var i in arr){
  if(arr[i] == value){
   return i;
  }
  }
 }

  //数据
  var dataint = {'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};　　

  //滚动条滚动时
  window.onscroll = function(){
  scrollslide(dataint);
  }　　

//判断是否具有了滚条加载数据块的条件
 function checkscrollslide(parent,clsname){
  var oparent = document.getelementbyid(parent);
  var obox = getbyclass(oparent,clsname);
  var lastboxh = obox[obox.length-1].offsettop + math.floor(obox[obox.length-1].offsetheight/2);
  var scrolltop = document.documentelement.scrolltop || document.body.scrolltop;
  var height = document.documentelement.clientheight || document.body.clientheight;
  return (lastboxh < scrolltop + height)? true:false;
 }

//滚动条滚动时执行
 function scrollslide(dataint){
  ////判断是否具有了滚条加载数据块的条件
  if(checkscrollslide('main','box')){
  var oparent = document.getelementbyid('main');
  //将数据块渲染到当前页面的尾部
  for(var i=0;i<dataint.data.length;i++){
   var oboxs = document.createelement('div');
   oboxs.classname = 'box';
   oparent.appendchild(oboxs);
   var opic = document.createelement('div');
   opic.classname = 'pic';
   oboxs.appendchild(opic);
   var oimg = document.createelement('img');
   oimg.src = 'images/' + dataint.data[i].src;
   opic.appendchild(oimg);
  }
  waterfall('main','box');
  }

$(window).on('load',function(){
  waterfall();
  var dataint={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
  $(window).on('scroll',function(){
  scrollslide(dataint);
  })
 });
 function waterfall(){
  var $obox = $('#main>div');
  var oboxw = $obox.eq(0).outerwidth();
  var cols = math.floor($(window).width()/oboxw);
  $('#main').css({
  'width' : cols * oboxw,
  'margin' : '0 auto'
  });
  var harr = [];
  $obox.each(function(index,value){
  var oboxh = $obox.eq(index).height();
  if(index<cols){
   harr.push(oboxh);
  }else{
   var minh = math.min.apply(null,harr);
   var minhindex = $.inarray(minh,harr);
   $(value).css({
   'position' : 'absolute',
   'top': minh + 15,
   'left' : $obox.eq( minhindex ).position().left
   });
   harr[minhindex] += $obox.eq(index).height() + 15;
  }
  });
 }
 function checkscrollslide(){
  var $lastbox = $('#main>div').last();
  var lastboxh = $lastbox.offset().top + math.floor($lastbox.height()/2);
  var scrolltop = $(window).scrolltop();
  var clienth = $(window).height();
  return (lastboxh < scrolltop + clienth) ? true : false;
 }
 function scrollslide(dataint){
  if(checkscrollslide()){
  $.each(dataint.data,function(index,value){
   var $box = $('<div>').addclass('box').appendto('#main');
   var $pic = $('<div>').addclass('pic').appendto($box);
   $('<img>').attr('src','images/' + $(value).attr('src')).appendto($pic);
  })
  waterfall();
  }
 }