做一个图片列表展示，由于照片数量太多，决定用瀑布流来实现
由于之前没有接触过瀑布流，不知从何下手
百度一下大家都在用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 : {})
原文地址：https://www.cnblogs.com/yaotome/p/9496540.html
时间： 2024-08-30 12:30:34