转：jQuery插件之Wookmark：流布局插件遇到图片资源请求过慢导致最终计算图片绝对位置top不够准确发生图片重叠的解决方案

谈起Wookmark我想做过前端的大侠都不会觉得陌生，它就是远近闻名的流布局jQuery插件，这个插件使用起来非常简单，需要引入两个js：

 

1. <script src="/js/jquery-1.10.2.min.js"></script>
2. <script src="js/jquery.wookmark.min.js"></script>

 

因为Wookmark是基于jQuery编写的插件，自然是少不了jQuery.js文件且必须在wookmark.js之前已入，否则将会报错。

接着就是html内图片容器的布局讲究了：

1、容器需要指定position为relative相对位置；

2、必须指定图片的高度和宽度；

示例代码如下所示：

 

01. <div class="example">
02. <div id="main" role="main">
03. <ul id="tiles">
04. <!-- These are our grid blocks -->
05. <li><img src="img/image_1.jpg" width="200" height="283"><p>1</p></li>
06. <li><img src="img/image_2.jpg" width="200" height="300"><p>2</p></li>
07. <li><img src="img/image_3.jpg" width="200" height="252"><p>3</p></li>
08. <li><img src="img/image_4.jpg" width="200" height="158"><p>4</p></li>
09. <li><img src="img/image_5.jpg" width="200" height="300"><p>5</p></li>
10. <li><img src="img/image_6.jpg" width="200" height="297"><p>6</p></li>
11. <li><img src="img/image_7.jpg" width="200" height="200"><p>7</p></li>
12. <li><img src="img/image_8.jpg" width="200" height="200"><p>8</p></li>
13. <li><img src="img/image_9.jpg" width="200" height="398"><p>9</p></li>
14. <li><img src="img/image_10.jpg" width="200" height="267"><p>10</p></li>
15. <li><img src="img/image_1.jpg" width="200" height="283"><p>11</p></li>
16. <li><img src="img/image_2.jpg" width="200" height="300"><p>12</p></li>
17. <li><img src="img/image_3.jpg" width="200" height="252"><p>13</p></li>
18. <li><img src="img/image_4.jpg" width="200" height="158"><p>14</p></li>
19. <li><img src="img/image_5.jpg" width="200" height="300"><p>15</p></li>
20. <li><img src="img/image_6.jpg" width="200" height="297"><p>16</p></li>
21. <li><img src="img/image_7.jpg" width="200" height="200"><p>17</p></li>
22. <li><img src="img/image_8.jpg" width="200" height="200"><p>18</p></li>
23. <li><img src="img/image_9.jpg" width="200" height="398"><p>19</p></li>
24. <li><img src="img/image_10.jpg" width="200" height="267"><p>20</p></li>
25. <li><img src="img/image_1.jpg" width="200" height="283"><p>21</p></li>
26. <li><img src="img/image_2.jpg" width="200" height="300"><p>22</p></li>
27. <li><img src="img/image_3.jpg" width="200" height="252"><p>23</p></li>
28. <li><img src="img/image_4.jpg" width="200" height="158"><p>24</p></li>
29. <li><img src="img/image_5.jpg" width="200" height="300"><p>25</p></li>
30. <li><img src="img/image_6.jpg" width="200" height="297"><p>26</p></li>
31. <li><img src="img/image_7.jpg" width="200" height="200"><p>27</p></li>
32. <li><img src="img/image_8.jpg" width="200" height="200"><p>28</p></li>
33. <li><img src="img/image_9.jpg" width="200" height="398"><p>29</p></li>
34. <li><img src="img/image_10.jpg" width="200" height="267"><p>30</p></li>
35. <!-- End of grid blocks -->
36. </ul>
37. </div>
38. </div>

 

接着就是当所有页面元素渲染完毕过后调用流布局的方法，如下所示：

 

01. (function ($){
02. var handler = $('#tiles li');
03.
04. handler.wookmark({
05. // Prepare layout options.
06. autoResize: true, // This will auto-update the layout when the browser window is resized.
07. container: $('#main'), // Optional, used for some extra CSS styling
08. offset: 5, // Optional, the distance between grid items
09. outerOffset: 10, // Optional, the distance to the containers border
10. itemWidth: 210 // Optional, the width of a grid item
11. });
12.
13. // Capture clicks on grid items.
14. handler.click(function(){
15. // Randomize the height of the clicked item.
16. var newHeight = $('img', this).height() + Math.round(Math.random() * 300 + 30);
17. $(this).css('height', newHeight+'px');
18.
19. // Update the layout.
20. handler.wookmark();
21. });
22. })(jQuery);

 

只要一句：wookmark()即可调用流布局，插件会自动根据容器内图图片容器的大小个数计算每一个容器的绝对位置（top、left）值和width和height值，从而达到每一张图片非常完美地呈现出来，且成一种水流一样的均匀垂直分布。

 

问题暴露：

1、当我们的站点访问资源速度很慢的情况下，你会发现最终呈现出来的流布局会有一些瑕疵，也就是尾部有一些图片容器发生了相互重叠的现象。

 

问题分析：

1、问题根源在于图片资源请求过慢，倒是插件无法获得图片的准确height和width值，从而导致了计算其position为absolute的情况下的top值不够准确，最后出现了图片相互重叠的情况。这个时候，让你改变窗体大小的情况下重新去调用一下wookmark() 将会发现重新的布局非常完美。因为这个时候图资源已经全部获取到了的。

 

问题解决办法：

1、既然是图片资源尚未完全加载的情况下出现的问题，那么我们就何不等待所有图片资源都加载完毕过后在执行流布局呢？

这个时候我们想到了jQuery的另外一个插件jquery.imagesloaded

这个插件就是用于等待和监听页面内所有图片资源全部加载完毕，我们可以直接这样下载这个插件的js：http://code.ciaoca.com/jquery/wookmark/demo/js/jquery.imagesloaded.js

这个js文件需要引入在jQuery之后wookmark之前

 

1. <script src="/js/jquery-1.10.2.min.js"></script>
2. <script src="js/jquery.imagesloaded.js"></script>
3. <script src="js/jquery.wookmark.min.js"></script>

 

接着我们就是调用imagesloaded监听加载完毕过后的状态然后调用流布局，代码如下所示：

 

01. (function ($) {
02. var loadedImages = 0, // Counter for loaded images
03. handler = $('#tiles li'); // Get a reference to your grid items.
04.
05. // Prepare layout options.
06. var options = {
07. autoResize: true, // This will auto-update the layout when the browser window is resized.
08. container: $('#main'), // Optional, used for some extra CSS styling
09. offset: 5, // Optional, the distance between grid items
10. outerOffset: 10, // Optional, the distance to the containers border
11. itemWidth: 210 // Optional, the width of a grid item
12. };
13.
14. $('#tiles').imagesLoaded(function(){
15. // Call the layout function.
16. handler.wookmark(options);
17.
18. // Capture clicks on grid items.
19. handler.click(function(){
20. // Randomize the height of the clicked item.
21. var newHeight = $('img', this).height() + Math.round(Math.random() * 300 + 30);
22. $(this).css('height', newHeight+'px');
23.
24. // Update the layout.
25. handler.wookmark();
26. });
27. }).progress(function(instance, image) {
28. // Update progress bar after each image load
29. loadedImages++;
30. if (loadedImages == handler.length)
31. $('.progress-bar').hide();
32. else
33. $('.progress-bar').width((loadedImages / handler.length * 100) + '%');
34. });
35. })(jQuery);

 

imagesLoaded(function(){}); 这样就表示图片资源全部加载完毕的状态监听了的。

这样一来，我们就彻底解决了流布局当图片资源请求过慢导致图片相互重叠的问题了的。