做一个图片列表展示，由于照片数量太多，决定用瀑布流来实现
由于之前没有接触过瀑布流，不知从何下手
百度一下大家都在用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 : {})