使用JS实现图片展示瀑布流效果

不知大家有没有发现，一般的图片展示网站都会使用瀑布流效果，所谓的瀑布流就是网站内的图片不会一下子全缓存出来，而是等你滚动到一定的距离的时候，下面的图片才会继续缓存，并且图片也是随机出现的，只是宽度一样，高度并不一样，高高低低就像瀑布一样，所以叫做瀑布流效果。下面我把代码给大家，大家随便下几张图片试试。

瀑布流不重复 * #box #box ul #box img); box.children; function insert(){ ; );//35是35张图片，可改成任意数，我这里总共是35张图片。 ); newli.innerHTML;//这是图片的文件名，要求是统一。].clientHeight); ) { minH) { x=i; break; } } ul[x].appendChild(newli); } ) { insert(); } document.onscroll=function(){ document.documentElement.clientHeight;document.documentElement.scrollHeight; document.documentElement.scrollTop; ) { ) { insert(); } } }

以上便是小编为您带来的全部内容了，希望对大家能够有所帮助。