你想写出绚丽多彩的图片墙吗？想的话就来一起看一下接下来的内容吧
接下来就让我们使用两个简单的插件来实现图片墙小案例吧。编写之前需要提前下载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属性引入图片地址。
