Masonry與AmazeUI結合實現瀑布流
阿新 • • 發佈：2018-08-18
都在 tof contain 部分 set maximum utf 百度 kit
做一個圖片列表展示，由於照片數量太多，決定用瀑布流來實現
由於之前沒有接觸過瀑布流，不知從何下手
百度一下大家都在用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 : {})
Masonry與AmazeUI結合實現瀑布流