jQuery实现图片的瀑布流效果

样式表：

div{ float:left;}

#main div{ background-color:#F00; padding-top:10px;  width:330px; margin-left:10px;}

#main｛width:1370px;｝

img{ width:330px;}

body里面的

   

js脚本里面的

var index = 1;   //图片的下标

function addPic()

{

//获取高度最低的div是哪一个

var $mindiv = $("#yyt1"); 

for(var i=2;i<=4;i++)

{

if($mindiv.height()>$("#yyt"+i).height())

{

$mindiv = $("#yyt"+i);

}

}

//给最短的div加图片，图片的序列，因为不是从数据库取图片，我只有9个图片，所以只要循环图片

$mindiv.html($mindiv.html()+" ");

index++;

if(index>9)

{

index = 1;

}

};

function mychange()

{

// $(window).height()   可视化区域的高度  

// $(document).scrollTop()   滚动的高度  

// $(document).height()     浏览器的整个高度    为了好看在后面-150

if($(window).height()+$(document).scrollTop()>=$(document).height()-150)

{

addPic();

}

window.setTimeout("mychange()",20);

}

//整个页面全部加载完在执行

window.onload = mychange;

自己做的也没注意什么。