JQuery瀑布流插件：Wookmark 使用心得

最近一个小项目要用到瀑布流，一般瀑布流的做法无非两种：1、按列CSS控制；2、JS控制。根据具体情况，我选择的是JS控制，也在网上找了不少JQuery插件，试用了一下，最终选择了Wookmark。选择理由也是两个：1、实例现成可参考；2、可以在图片不确定高度的时候使用（这一点很多JQuery瀑布流插件都做不到哦）

Wookmark JQuery官网地址：http://www.wookmark.com/jquery-plugin/

Wookmark JQuery下载地址：Wookmark-jQuery-master

根据说明或压缩包里的例子，设置比较简单：

1、先加载这两项

先是Wookmark的JS

<script src=”/js/wookmark/jquery.wookmark.js”></script>

然后是图片高度计算JS

<script src=”/js/wookmark/jquery.imagesloaded.js”></script>

最后是：

<script type="text/javascript">
    (function ($) {
      var loadedImages = 0, // Counter for loaded images
          handler = $('#photo li'); // Get a reference to your grid items.
      // Prepare layout options.
      var options = {
        autoResize: true, // This will auto-update the layout when the browser window is resized.
        container: $('#photo_list'), // Optional, used for some extra CSS styling
        offset: 13, // Optional, the distance between grid items
        outerOffset: 5, // Optional, the distance to the containers border
        itemWidth: 320 // Optional, the width of a grid item
      };

      $('#photo').imagesLoaded(function() {
        // Call the layout function.
        handler.wookmark(options);
		
		/*
		// Capture clicks on grid items.
        handler.click(function(){
          // Randomize the height of the clicked item.
          var newHeight = $('img', this).height() + Math.round(Math.random() * 300 + 30);
          $(this).css('height', newHeight+'px');

          // Update the layout.
          handler.wookmark();
        });
		*/
       
      }).progress(function(instance, image) {
        // Update progress bar after each image load
        loadedImages++;
        if (loadedImages == handler.length)
          $('.progress-bar').hide();
        else
          $('.progress-bar').width((loadedImages / handler.length * 100) + '%');
      });
    })(jQuery);
  </script>

当然，因为瀑布流一般是做图片展示的，用一下lazyload的话，效果更好，加载速度也更快些。

转载请注明：小码农 » JQuery瀑布流插件：Wookmark 使用心得