本文介绍了用js实现百度瀑布流的方法，供大家参考，具体实现方法如下：






百度图片瀑布



*边距：0；填充：0；}
#容器{
宽度：1000px；
边境：1px solid # F00；
保证金：50px汽车；
职位：相对；
}
#集装箱img {
位置：绝对；
}
#装载机{
宽度：100%；
身高：60px；
背景：URL（加载程序GIF）不重复中心；
位置：固定；
底部：0；
左：0；
}



$（函数（）{（））
ocontainer = $（var的#容器）；
oloader = $（var的#装载机）；
VaR的Iwidth = 200； / /列的宽度
VaR iSpace = 10； / /列数
无功iouterwidth = Iwidth + iSpace；
无功surl = 'localhost / / / JSON API popularcallback =；
VaR该= 0；
VaR iPage = 0；
VaR ARRL = { }；
VaR的= { }；
无功综合宽带电信网=真；

功能setcells（）{
该= math.floor（$（窗口），InnerWidth（）/ iouterwidth）；
如果（该< 3）{
该= 3；
}
如果（该> 6）{
该= 6；
}
OContainer.css（'width '，iouterwidth *该套公寓）；
}
setcells（）；
对于（var i = 0；i <该；i++）{
ArrL.push（我iouterwidth）；
ArrT.push（0）；
}
/ / console.log（ARRL）
GetData（）
函数GetData（）{
如果（综合宽带电信网）{
综合宽带电信网= false
OLoader.show（）；
美元。getJSON（surl，页= + iPage，功能（数据）{）
美元。每个（数据、功能（我，obj）{
img = $（var $'）；
img.attr美元（'src，OBJ。预览）；
VaR的Iheight = Iwidth / obj.width * obj.height；
VaR指标= getmin（）；
img.appendto美元（ocontainer）；
img.css美元（{宽度：Iwidth，高度的Iheight }）；
img.css美元（{：{ }的指数，左：ARRL {指数} }）
}的{指数=的Iheight + 10；
OLoader.hide（）；
}）
iPage + +；
综合宽带电信网=真；
}）
}
}
$（窗口），（'resize功能（））{
无功ioldcell =该；
setcells（）；
VaR IH =美元（窗口），ScrollTop（+ $）（窗口）（。innerheight）；
无功iminindex = getmin（）；
如果（{ }的iminindex + ocontainer.offset（）。顶< IH）{
GetData（）；
}
如果（ioldcell = =该）返回；
的= { }；
ARRL = { }；
对于（var i = 0；i <该；i++）{
ArrL.push（我iouterwidth）；
ArrT.push（0）；
}
VaR（'img IMG = ocontainer.find美元）；
img.each美元（函数（指数，obj）{
VaR指标= getmin（）；
$（这）。动画（{：{ }的指数，左：ARRL {指数} }）
{ } =美元的指数（这）。Height（）+ 10；
}）
}）
$（窗口），（'scroll功能（））{
VaR IH =美元（窗口），ScrollTop（+ $）（窗口）（。innerheight）；
无功iminindex = getmin（）；
如果（{ }的iminindex + ocontainer.offset（）。顶< IH）{
GetData（）；
}
}）
功能getmin（）{
VaR的IV = { 0 }；
无功_index = 0；
对于（var i = 0；i < arrt.length；i++）{
如果（我的{ } <四）{
四=的{我}；
_index =我；
}
}
返回_index；
}
}）


百度图片瀑布








希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。