您现在的位置是：网站首页 > 心得笔记
瀑布流布局实现图片延迟加载特效
简介本篇文章使用了两个插件，分别是开发过程中常用的瀑布流和图片延迟加载插件，平日里，在逛淘宝、天猫等大型购物网站时，都会发现这两款插件包的使用，这里给出一个小的demo
运行效果图：
插件包下载：
https://blog.blonglee.me/js/jquery.lazyload.js
https://blog.blonglee.me/js/jquery.masonry.min.js
html:
<img src="/admin/img/blank.gif" data-original="/admin/img/a7.jpg" width="205" height="153" alt="" />
注意，每张图片的src属性对应的是一张预定义的图片，就是在真正的图片还没加载的时候的替代图片，我们通常使用https://blog.blonglee.me/admin/img/blank.gif。真正的图片是由属性data-original指定的，然后还需要设置图片的宽度和高度。
js:
$(function(){
$("img").lazyload({ effect : "fadeIn"
});
});只需要在元素上调用lazyload()即可!
Lazyload提供了多个参数可设置不同的效果。
threshold：灵敏度，即可以通过设置灵敏度来控制图片的加载，如设置为200，即200像素前加载图片，默认为0，即到达图片边界时才加载。
event：绑定事件，即可以通过绑定click、mouseover或者任意自定义事件来触发图片的加载。默认是当用户滚动到图片窗口时触发图片加载。
effect：设置效果，即可以设置图片加载时的特效，如fadeIn，默认是show。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="lazyload,jquery" />
<meta name="description" content="" />
<title>演示：图片延迟加载效果</title>
<style type="text/css">
#mainpage{width:910px; margin:30px auto 0 auto; background:#fff; -moz-border-radius:12px;-khtml-border-radius: 12px;-webkit-border-radius: 12px; border-radius:12px;}
#container{width:780px; margin:10px auto}
.photo{float:left; width:205px; margin:10px; padding:10px; border:1px solid #d3d3d3; background:#f7f7f7;-moz-border-radius:4px;-khtml-border-radius: 4px;-webkit-border-radius: 4px; border-radius:4px;}
.photo img{width:205px}
.photo p{line-height:20px; margin:4px auto}
.clear{clear:both}
</style>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.lazyload.js"></script><!--图片懒加载插件-->
<script type="text/javascript" src="/js/jquery.masonry.min.js"></script><!--瀑布流布局插件-->
<script type="text/javascript">
$(function(){
$('#container').masonry({
// options
itemSelector : '.photo',
columnWidth : 247
});
$("img").lazyload({
placeholder : "/admin/img/blank.gif",
effect : "fadeIn"
});
});
</script>
</head>
<body>
<div id="mainpage">
<h2 class="top_title"><a href="http://www.helloweba.net/javascript/151.html">图片延迟加载效果</a></h2>
<div id="container">
<div class="photo">
<a href="#"><img src="/admin/img/blank.gif" data-original="/admin/img/a1.jpg" width="205" height="188" alt="" /></a>
<p>清柔空灵宛在云端传响，袅袅余音不觉声飘四方</p>
</div>
<div class="photo">
<a href="#"><img src="/admin/img/blank.gif" data-original="/admin/img/a5.jpg" width="205" height="307" alt="" /></a>
<p>当有这样一个角落，能够布置阴凉，也能拥抱微阳，能够遮挡风雨，也能触摸清新，能够能感受喧哗，也能守卫心安，能够感受这个世界，却让这个世界看不到你</p>
</div>
<div class="photo">
<a href="#"><img src="/admin/img/blank.gif" data-original="/admin/img/a6.jpg" width="205" height="153" alt="" /></a>
<p>起风了经过重新填词又被郁可唯赋予的另一种声色演绎</p>
</div>
<div class="photo">
<a href="#"><img src="/admin/img/blank.gif" data-original="/admin/img/a7.jpg" width="205" height="153" alt="" /></a>
<p>“把阳光当作橡皮擦，活的潇洒。”歌声袅袅是在倾诉，在回忆，而意难忘，歌声把感情表达得淋漓尽致。以歌传情，美极了！！</p>
</div>
<div class="photo">
<a href="#"><img src="/admin/img/blank.gif" data-original="/admin/img/a8.jpg" width="205" height="136" alt="" /></a>
<p>郁可唯低音娓娓道来回味旧时情感，后面洒脱的高音唱出坚定又不舍。</p>
</div>
<div class="photo">
<a href="#"><img src="/admin/img/blank.gif" data-original="/admin/img/a9.jpg" width="205" height="266" alt="" /></a>
<p>郁可唯低音娓娓道来回味旧时情感，后面洒脱的高音唱出坚定又不舍。</p>
</div>
<div class="photo">
<a href="#"><img src="/admin/img/blank.gif" data-original="/admin/img/a1.jpg" width="205" height="180" alt="" /></a>
<p>郁可唯低音娓娓道来回味旧时情感，后面洒脱的高音唱出坚定又不舍。</p>
</div>
<div class="photo">
<a href="#"><img src="/admin/img/blank.gif" data-original="/admin/img/a2.jpg" width="205" height="273" alt="" /></a>
<p>郁可唯低音娓娓道来回味旧时情感，后面洒脱的高音唱出坚定又不舍。</p>
</div>
<div class="photo">
<a href="#"><img src="/admin/img/blank.gif" data-original="/admin/img/a3.jpg" width="205" height="136" alt="" /></a>
<p>郁可唯低音娓娓道来回味旧时情感，后面洒脱的高音唱出坚定又不舍。</p>
</div>
<div class="photo">
<a href="#"><img src="/admin/img/blank.gif" data-original="/admin/img/a4.jpg" width="205" height="247" alt="" /></a>
<p>郁可唯低音娓娓道来回味旧时情感，后面洒脱的高音唱出坚定又不舍。</p>
</div>
<div class="photo">
<a href="#"><img src="/admin/img/blank.gif" data-original="/admin/img/a5.jpg" width="205" height="274" alt="" /></a>
<p>郁可唯低音娓娓道来回味旧时情感，后面洒脱的高音唱出坚定又不舍。</p>
</div>
<div class="photo">
<a href="#"><img src="/admin/img/blank.gif" data-original="/admin/img/a6.jpg" width="205" height="205" alt="" /></a>
<p>郁可唯低音娓娓道来回味旧时情感，后面洒脱的高音唱出坚定又不舍。</p>
</div>
<div class="photo">
<a href="#"><img src="/admin/img/blank.gif" data-original="/admin/img/a7.jpg" width="205" height="307" alt="" /></a>
<p>郁可唯低音娓娓道来回味旧时情感，后面洒脱的高音唱出坚定又不舍。</p>
</div>
<div class="photo">
<a href="#"><img src="/admin/img/blank.gif" data-original="/admin/img/a8.jpg" width="205" height="157" alt="" /></a>
<p>郁可唯低音娓娓道来回味旧时情感，后面洒脱的高音唱出坚定又不舍。</p>
</div>
<div class="photo">
<a href="#"><img src="/admin/img/blank.gif" data-original="/admin/img/a9.jpg" width="205" height="127" alt="" /></a>
<p>郁可唯低音娓娓道来回味旧时情感，后面洒脱的高音唱出坚定又不舍。</p>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>