本文介绍了如何使用JavaScript实现懒加载和瀑布流布局。懒加载通过延迟加载图片来提升网页响应速度，当图片进入视口时再加载实际图片。而瀑布流布局则是常见于图片展示的多栏不规则布局。文章提供了HTML、CSS和JS代码示例，说明了由于懒加载特性，页面初次加载时布局可能不理想，需要滚动后才能呈现完整效果。
瀑布流布局一般用于图片布局，其视觉表现为参差不齐的多栏布局，随着页面的滑动，会不断加载新的图片。
懒加载主要用于实现提高系统的响应速度。对于图片比较多的网页，如果一次性加载出所有的图片，会导致系统的加载时间较长，用户等待时间也很长。而懒加载则在用户需要查看图片的时候才加载他，从而使系统可以更快的加载图片。
懒加载主要的实现方式是：先设置所有的图片的src都为同一个背景图片（如loading图片），同时每个图片都设置一个属性存储真正的图片路径，然后在图片加载到屏幕中是，将真正图片的路径传给src。
HTML代码：
<body>
<div id='container'>
<div class='box'><img dataSrc="images/1.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/2.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/3.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/4.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/5.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/6.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/7.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/8.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/9.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/10.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/11.jpg" src="images/loading.gif"></div>
<div class='box'><img dataSrc="images/12.jpg" src="imag
最低0.47元/天 解锁文章
725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
