jQuery Wookmark 瀑布流

下载地址：http://code.ciaoca.com/jquery/wookmark/

<style type="text/css">
  #pbl {
    width: 1200px;
    margin: 0 auto;
    position: relative;
  }

  #tiles li {
    width: 380px;
    display: none;
    list-style: none;
  }

  #tiles li img {
    width: 100%;
  }

  #tiles li p {
    position: absolute;
    bottom: 0px;
    display: block;
    width: 94%;
    padding: 10px 3%;
    font-size: 14px;
    color: white;
    background: url('../images/img/span_bg.png');
    opacity: 0;
    transition: all ease-in-out .5s;
  }

  #tiles li:hover p {
    opacity: 1;
  }
</style>

<div id="pbl" role="pbl">

  <ul id="tiles">
    <!-- These is where we place content loaded from the Wookmark API -->
  </ul>

  <div id="loader">
    <div id="loaderCircle">
                  <img src="../images/loading.gif" style="margin-left: 50%;transform: translateX(-50%);" />
    </div>
  </div>

</div>

<script src="../js/jquery.wookmark.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.imagesloaded.js" type="text/javascript" charset="utf-8"></script>
<script>
  var appid = '{appid}',
    timestamp = '{timestamp}',
    signature = '{signature}';
  var page = 1;
</script>
<script type="text/javascript">
  (function ($) {

    var handler = null,
      page = 1,
      isLoading = false
    //准备布局选项。
    var options = {
      autoResize: false, // 这将在调整浏览器窗口大小时自动更新布局。
      container: $('#tiles'), //可选，用于一些额外的CSS样式
      offset: 20, //可选，网格项之间的距离
      itemWidth: 380 // 可选，网格项的宽度
    };

    /**
     * 当滚动到底部时，添加更多的平铺。
     */
    function onScroll(event) {
      // 只有在我们还没等数据的时候才检查。
      if (!isLoading) {
        //检查是否在broser窗口下边缘的100像素范围内。
        var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
        if (closeToBottom) {
          loadData();
        }
      }
    };

    /**
     *刷新布局。
     */
    function applyLayout() {
      options.container.imagesLoaded(function () {
        // 加载图像后创建新的布局处理程序。
        handler = $('#tiles li');
        handler.wookmark(options);
      });
    };

    /**
     * 从API加载数据。
     */
    function loadData() {
      var apiURL = '/api.php/list/{sort:scode}/page/' + page + '/num/5';
      isLoading = true;
      $('#loaderCircle').show();
      console.log(apiURL);
      $.ajax({
        type: "post",
        url: apiURL,
        data: {
          appid: '{pboot:appid}',
          timestamp: '{pboot:timestamp}',
          signature: '{pboot:signature}'
        },
        success: onLoadData
      });
    };

    /**
     * 从API接收数据，为图像创建HTML并更新布局
     */
    function onLoadData(data) {
      data = $.parseJSON(data);
      console.log(data.data);
      isLoading = false;
      $('#loaderCircle').hide();

      //为将来的调用增加页索引。
      page++;
      //为图像创建HTML。
      var html = '';
      var length = data.data.length,
        image;
      for (var i = 0; i < length; i++) {
        image = data.data[i];
        html += '<li>';

        // 图像标签（在Wookmark中预览宽度为200px，因此我们根据它计算高度）。
        //                      html += '<img src="' + image.ico + '" width="380" height="' + Math.round(image.height / image.width * 380) + '">';
        html += '<img src="' + image.ico + '" width="380" height="auto">';

        // Image title.
        html += '<p>' + image.title + '</p>';

        html += '</li>';
      }

      if (data.code == 1) {
        // 将图像HTML添加到页面。
        $('#tiles').append(html);
        //应用布局。
        applyLayout();
      } else {
        isLoading = true;
        alert(data.data);

      }

    };

    // 捕获滚动事件。
    $(document).bind('scroll', onScroll);

    //从API加载第一个数据。
    loadData();
  })(jQuery);
</script>