你想写出绚丽多彩的图片墙吗?想的话就来一起看一下接下来的内容吧
接下来就让我们使用两个简单的插件来实现图片墙小案例吧。编写之前需要提前下载lazyload懒加载插件和masonry瀑布流式布局插件。(百度可以搜到呦!)
1、使用的核心方法
a. 懒加载插件 – lazyload()
方法
b.瀑布流插件 – masonry()
方法
2、核心问题
必须保证所有图片延迟加载完毕后,才能实现瀑布流效果。
解决这个问题可以使用load方法,等懒加载图片加载完毕后,实现瀑布流效果。
具体实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片墙小案例</title>
<script src="../../jquery-1.12.4.js"></script>
<script src="../tuupola-jquery_lazyload/jquery.lazyload.js"></script>
<script src="../masonry/masonry.pkgd.js"></script>
<style>
.grid {
width: 80%;
margin: 0 auto;
overflow: hidden;
}
.imgs {
float: left;
display: block;
width: 300px;
margin: 7px;
}
</style>
</head>
<body>
<div class="grid">
//首先引入图片地址
<img data-original="../imgs/2 (1).jpg" class="imgs">
<img data-original="../imgs/2 (2).jpg" class="imgs">
<img data-original="../imgs/2 (3).jpg" class="imgs">
<img data-original="../imgs/2 (4).jpg" class="imgs">
<img data-original="../imgs/2 (5).jpg" class="imgs">
<img data-original="../imgs/2 (6).jpg" class="imgs">
<img data-original="../imgs/2 (7).jpg" class="imgs">
<img data-original="../imgs/2 (8).jpg" class="imgs">
<img data-original="../imgs/2 (9).jpg" class="imgs">
<img data-original="../imgs/2 (10).jpg " class="imgs">
<img data-original="../imgs/2 (1).jpg" class="imgs">
<img data-original="../imgs/2 (2).jpg" class="imgs">
<img data-original="../imgs/2 (3).jpg" class="imgs">
<img data-original="../imgs/2 (4).jpg" class="imgs">
<img data-original="../imgs/2 (5).jpg" class="imgs">
<img data-original="../imgs/2 (6).jpg" class="imgs">
<img data-original="../imgs/2 (7).jpg" class="imgs">
<img data-original="../imgs/2 (8).jpg" class="imgs">
<img data-original="../imgs/2 (9).jpg" class="imgs">
<img data-original="../imgs/2 (10).jpg" class="imgs">
</div>
</body>
<script>
// 图片墙效果 - 必须保证所有图片延迟加载完毕后,才能实现瀑布流效果
// 懒加载--实现页面中的延迟加载
$('.imgs').lazyload({
threshold: 200,
effect: 'fadeIn',
load: function () {
// 懒加载效果实现后实现瀑布流式布局
$('.grid').masonry({
itemSelector:'.imgs'
});
}
});
</script>
</html>
此处添加一个小问题:懒加载和瀑布流混合使用时,使用哪个属性引入图片地址?
经测试得出结论如下:
单独使用懒加载插件,引入图片地址使用
data-original
属性。单独使用瀑布流插件使用scr
属性引入图片地址。二者结合使用时,使用data-original
属性引入图片地址。