用js实现一个来显示瀑布效果（一个简单的例子）

我不知道你是否发现一般的图片显示站点会使用瀑布效应，所谓瀑布流。

网站的图片不会一下子缓存，而是等你滚到一定的距离。

下面的图片会继续缓存，而且图片也是随机的，宽度相同，高度不是。

同样的，这就像瀑布，叫做瀑布流效应。现在我给大家代码，大家好。

试几张照片。

瀑布不会重复

* { margin: 0px；padding: 0px；列表样式：无；}
#箱{宽度：1000px；保证金：0汽车；}
#盒UL {浮动：左；宽度：200px；右边距：50px；}
#盒img {宽度：200px；}


VaR箱= document.getelementbyid（'box）；
VaR UL = box.children；
函数插入（）{
变量x＝0；
无功srcnum = math.floor（Math.random）*（35）； / / 35是35张图片，可以更改为任何数，我这里有一个总的35张图片。
无功newli = document.createelement（李的）；
newli .innerHTML = ''； / /这是图片文件的名字是统一的。
var胡志明= Math.min（UL { 0 }。自己，UL { 1 }。自己，UL { 2 }。自己，UL { 3 }。自己）；
对于（var i = 0；i < ul.length；i++）{
如果（UL {我}，{自己= = Minh）
= i；
打破；
}
}
UL {X}。appendChild（newli）；
}
对于（var i = 0；i < 20；i + +）{
插入（）；
}
文件。onscroll =函数（）{
无功viewh =文件。身体。自己的| | document.documentelement.clientheight；
var = document.documentelement.scrollheight调查；
无功scrollt =文件。身体。scrollTop | | document.documentelement.scrolltop；
如果（调查scrollt viewh＜500）{
对于（var i = 0；i < 20；i + +）{
插入（）；
}
}
}
以上是用js显示瀑布流效果（简单的例子），这是萧边分享给你的全部内容。我希望能给你一个参考，希望你能支持它。