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

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

百度一下大家都在用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结合实现瀑布流的更多相关文章

  1. js中masonry与infinitescroll结合 形成瀑布流

    后台:(有点问题 page应该从1开始 而不是从0开始)     public function actionExperts()    {        $top=5;        $page=em ...

  2. Masonry + Ajax 实现无限刷新瀑布流

    效果就如我的个人站yooao.cc,把我实现的思路分享给大家. Masonry渲染页面如果有图片时需要imagesLoaded辅助,不然有可能会造成布局重叠. 一个大体的思路:前端取得最后一篇文章的i ...

  3. 玩转Masonry JS库来实现瀑布流Web效果

    工作项目中需要制作个Mobile上的Web App的展示,方便快捷访问和评价反馈.在展示页面能看到应用展示图,点击进入Web应用.我不是前端开发者,对HTML, CSS, JS这三剑客仅仅是略知一二. ...

  4. bootstrap+masonry.js写瀑布流

    最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要 ...

  5. js插件---瀑布流Masonry

    js插件---瀑布流Masonry 一.总结 一句话总结:还是要去看官网,比amazeui上面介绍的详细很多 1.瀑布流的原理是什么? 给外层套好相对定位,里面的每一个弄好绝对定位,然后计算出每一个的 ...

  6. 纯手工打造漂亮的瀑布流，五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox！

    前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...

  7. masonry插件和infinitescroll插件实现无刷新无分页完美瀑布流

    地址有:http://www.17sucai.com/pins/2657.html 如果你善于发现美,如果你善于观察新鲜的事物,如果你是一名有爱的前端攻城师或设计尸,那么你一定不会对下面图片中的结构感 ...

  8. 瀑布流插件（jquery.masonry.js）

    什么是瀑布流?去看看Pinterest(这才是鼻祖),Mark之,蘑菇街,点点网,还有腾讯的微博广场吧.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部. Masonry是一款很好用的jqu ...

  9. Masonry+Infinite-Scroll实现无刷新无分页完美瀑布流(转)

    一.Masonry 是基于Jquery插件,用于对CSS布局的可移动层进行重新布局.Masonry愿意石工,可以这样形象的理解,页面上很多大小不一的移动层可以想象成散乱的石头,经过Masonry这个石 ...

随机推荐

  1. windows下配置apache+https

    通过https反向代理映射到http地址,可实现以https的方式,访问普通的http网站.主要涉及到以下三个配置文件的修改:httpd.confhttpd-ssl.confhttpd-vhosts. ...

  2. maven向本地仓库导入jar包

    如果maven工程的依赖jar包在网上找不到,那么只能自己打包,然后传到本地仓库,可以使用如下命令 mvn install:install-file -DgroupId=com.redis.redis ...

  3. HTML 理解标签 - meta

    meta标签 , 常用的有以下几个属性: 1. name : 比较常见的一些属性 author: 就是这个文档的作者名称,可以用自由的格式去定义 description: 包括一个关于页面内容的缩略而 ...

  4. SfMLearner 记录

    2019年3月2日09:29:54 正在看SfMLearner的pytorch源码,意识到无监督的深度估计最重要的是利用实体的一致性 来建立loss. 对于一个不移动的物体,相机从一个pose到另一个 ...

  5. NET-SNMP基本命令

    当环境设置好后,运行snmpd,即snmp代理进程,就可以使用管理工具查询其中的信息了.Net- snmp提供的查询工具有很多,这里只介绍常用的几个,而且大部分查询命令的格式都大同小异.这里以.iso ...

  6. SQL查询某库所有的表所有的字段及字段的属性

    then d.name else null end) 表名, a.colorder 字段序号, a.name 字段名, ( then '√'else '' end) 标识, ( then '√' el ...

  7. Navicat连接到服务器端数据库

    https://blog.csdn.net/javakklam/article/details/80060866

  8. windows开发各种dll缺失

    推荐使用 depend这个工具,非常好用 http://www.dependencywalker.com/ 打开对应的文件,就能看到缺失了哪些dll 感谢博主: https://blog.csdn.n ...

  9. iOS下 UILabel 如何自动换行

    背景: 相信很多朋友都遇到过,文本的内容长度不一,需要根据内容的多少来自动换行处理. 场景: 很多APP中评论,有的评论长,有的评论短,有的一行,有的多行.   下面以评论的实现为例来说说具体如何实现 ...

  10. 74.纯 CSS 创作一台 MacBook Pro

    原文地址:https://segmentfault.com/a/1190000015568609 HTML code: <div class="macbook"> &l ...