jQuery Waterfall插件的使用-瀑布流图片显示

最近做一个项目需要用到jQuery Waterfall插件-瀑布流图片显示

jquery waterfall plugin,like Pinterest 、 huaban.com 、 faxianla.com

下载地址： waterfall plugin

如何使用

第一步:

添加html代码

<div id="container"></div>

第二步:

引入需要的js

<script src="/path/jquery.min.js"></script>
<script src="/path/handlebars.js"></script>
<script src="/path/waterfall.min.js"></script>

第三步:

添加模板

<script id="waterfall-tpl" type="text/x-handlebars-template">
    //template content
</script>

第四步：

script的实现如下:

$(‘#container‘).waterfall({
  itemCls: ‘waterfall-item‘, 
  prefix: ‘waterfall‘,
  fitWidth: true, 
  colWidth: 240, 
  gutterWidth: 10,
  gutterHeight: 10,
  align: ‘center‘,
  minCol: 1, 
  maxCol: undefined, 
  maxPage: undefined, 
  bufferPixel: -50, 
  containerStyle: {
    position: ‘relative‘
  },
  resizable: true, 
  isFadeIn: false,
  isAnimated: false,
  animationOptions: { 
  },
  isAutoPrefill: true,
  checkImagesLoaded: true,
  path: undefined,
  dataType: ‘json‘, 
  params: {}, 

  loadingMsg: ‘<div style="text-align:center;padding:10px 0; color:#999;"><img src="data:image/gif;base64,R0lGODlhEAALAPQAAP///zMzM+Li4tra2u7u7jk5OTMzM1hYWJubm4CAgMjIyE9PT29vb6KiooODg8vLy1JSUjc3N3Jycuvr6+Dg4Pb29mBgYOPj4/X19cXFxbOzs9XV1fHx8TMzMzMzMzMzMyH5BAkLAAAAIf4aQ3JlYXRlZCB3aXRoIGFqYXhsb2FkLmluZm8AIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7" alt=""><br />Loading...</div>‘,

  state: { 
    isDuringAjax: false, 
    isProcessingData: false, 
    isResizing: false,
    curPage: 1 
  },

  // callbacks
  callbacks: {
    /*
     * loadingStart
     * @param {Object} loading $(‘#waterfall-loading‘)
     */
    loadingStart: function($loading) {
      $loading.show();
      //console.log(‘loading‘, ‘start‘);
    },

    /*
     * loadingFinished
     * @param {Object} loading $(‘#waterfall-loading‘)
     * @param {Boolean} isBeyondMaxPage
     */
    loadingFinished: function($loading, isBeyondMaxPage) {
      if ( !isBeyondMaxPage ) {
        $loading.fadeOut();
        //console.log(‘loading finished‘);
      } else {
        //console.log(‘loading isBeyondMaxPage‘);
        $loading.remove();
      }
    },

    /*
     * loadingError
     * @param {String} xhr , "end" "error"
     */
    loadingError: function($message, xhr) {
      $message.html(‘Data load faild, please try again later.‘);
    },

    /*
     * renderData
     * @param {String} data
     * @param {String} dataType , "json", "jsonp", "html"
     */
    renderData: function (data, dataType) {
      var tpl,
        template;

      if ( dataType === ‘json‘ ||  dataType === ‘jsonp‘  ) { // json or jsonp format
        tpl = $(‘#waterfall-tpl‘).html();
        template = Handlebars.compile(tpl);

        return template(data);
      } else { // html format
        return data;
      }
    }
  },

  debug: false
});

第五步：

设置调用数据的服务

第六步：

DEMO实例如下：

infinitescroll

原文: http://blog.csdn.net/websites/article/details/45094407

谢谢关注websites博客!