Masonry与AmazeUI结合实现瀑布流

做一个图片列表展示，由于照片数量太多，决定用瀑布流来实现

由于之前没有接触过瀑布流，不知从何下手

百度一下大家都在用Masonry

官网 https://masonry.desandro.com/

这是某网站提供的一个demo http://www.jq22.com/yanshi10136

看了一下它的代码，由于本人是小白，感觉实现起来很复杂，决定找别的解决方案

网站框架用的是妹子UI，有没有结合妹子实现的瀑布流呢。

这里是AmazeUI某插件官方提供的一个demo http://amazeui.github.io/masonry/docs/panel.html

它的代码很简单，也容易理解

比葫芦画瓢，自己将它改造了一下，用到了项目中

<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.0/css/amazeui.min.css">
  <script src="http://cdn.amazeui.org/jquery/2.1.4/jquery.min.js"></script>
  <script src="http://cdn.amazeui.org/amazeui/2.7.0/js/amazeui.min.js"></script>
  <link rel="stylesheet" href="./demo.css"/>
  <style>
  .am-panel-bd img
  {
      width:100%;
      height:130px;
  }
  </style>
</head>
<body class="am-plugin">
<section class="amp-main">
  <div class="am-container amp-content">
    <h1><a name="masonry-jie-he-panel-shi-yong" class="anchor" href="#masonry-jie-he-panel-shi-yong"><span class="header-link"></span></a>Masonry 结合 Panel 使用</h1><hr>
<div id="js-container">
</div>
<div id="load-more"><button class="am-btn am-btn-primary">载入更多</button></div>
<script type="text/x-handlebars-template" id="tpl-list">
  {{#each Table}}
  <div class="msry-item">
    <section class="am-panel am-panel-default">
      <div class="am-panel-bd">
        <div><a href = '/ShowPhoto.aspx?photoid={{PhotoID}}' target='_blank'><img src= '{{PhotoFileLocation}}Thumbnail/{{PhotoID}}.jpg'/></a></div>
        <div>
         {{#if CName }}
            {{CName}}({{LName}})
            {{else}}
            {{FileName}}
         {{/if}}
        </div>
      </div>
    </section>
  </div>
  {{/each}}
</script>

<script src="./masonry.pkgd.min.js"></script>
<script src="./bundle.js"></script>
    <nav class="amp-pager">
    </nav>
  </div>
</section>
</body>
</html>

代码使用了Handlebars.js模板引擎

bumdle.js中的一部分调用代码

    (function (global) {
        'use strict';

        /* global: Masonry */

        var $ = (typeof window !== "undefined" ? window['jQuery'] : typeof global !== "undefined" ? global['jQuery'] : null);
        var Hanlebars = require('handlebars');

        $(function () {
            var pagenumber = 1;
            var $c = $('#js-container');
            var tpl = $('#tpl-list').html();
            var compiler = Hanlebars.compile(tpl);

            var getURL = function () {
                return '../handler/geositehandler.ashx?action=getphotolistbynode&pagenumber=' + pagenumber;
            };
            var getList = function (url) {
                $.getJSON(url).then(function (data) {
                     console.log(data);
                    var $html = $(compiler(data));
                    //console.log(compiler(data));
                    $c.append($html).masonry('appended', $html).masonry('layout');
                });
            };

            $c.masonry({
                itemSelector: '.msry-item'
            });

            getList(getURL());

            $('#load-more').on('click', function () {
                pagenumber++;
                getList(getURL());
            });
        });

    }).call(this, typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})