最新消息:imsyx老店新开,原博客因服务器问题,数据全毁,痛心!

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

JQuery tally 1350浏览

最近一个小项目要用到瀑布流,一般瀑布流的做法无非两种: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 使用心得