HTML5技术

使用JS实现图片展示瀑布流效果 - 骑猪敲代码

字号+ 作者:H5之家 来源:H5之家 2016-09-07 14:00 我要评论( )

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

不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流

就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候,

下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不

一样,高高低低就像瀑布一样,所以叫做瀑布流效果。下面我把代码给大家,大家

随便下几张图片试试。

瀑布流不重复 * #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(); } } }

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • canvas对象arc函数的使用-遁地龙卷风 - 遁地龙卷风

    canvas对象arc函数的使用-遁地龙卷风 - 遁地龙卷风

    2016-09-07 15:00

  • 使用rem来开发你的移动端网站 - 荒漠千蝶

    使用rem来开发你的移动端网站 - 荒漠千蝶

    2016-09-07 11:00

  • canvas对象arcTo函数的使用-遁地龙卷风 - 遁地龙卷风

    canvas对象arcTo函数的使用-遁地龙卷风 - 遁地龙卷风

    2016-09-07 10:00

  • 使用 Entity Framework Core 时,通过代码自动 Migration - JRoger

    使用 Entity Framework Core 时,通过代码自动 Migration - JRoger

    2016-09-04 17:00

网友点评
d