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

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

百度一下大家都在用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. JavaScript 函数调用和this指针

    函数调用和this指针 1. 全局环境的this指针 浏览器全局环境下this指向window对象 console.log(this); //Window {postMessage: ƒ, blur: ...

  2. 应用程序调用dll动态库，参数有vector时崩溃的问题

    引用:http://blog.csdn.net/guoliushui/article/details/43017339 今天跟同事遇到了一个问题,问题背景: 一个动态库Tst.dll: 一个应用程序A ...

  3. 学习python第三天

    变量的命名规范 1.只能有 字母 数字 及_组成 2.不能以数字开头 3.避免与系统关键词重名:重名不会报错,但系统的功能就被自定义的功能屏蔽掉了(严重不建议这样做) 4._开头的变量都有特出含义 5 ...

  4. spring从服务器磁盘读取图片，然后显示于前端页面上

    需求是,前台通过传参,确定唯一图片,然后后台在服务器磁盘中读取该图片,然后显示于前台页面上. 后台代码: @RequestMapping("unit/bill/showeinvoice&qu ...

  5. MySQL 错误集-汇总

    Q&A: MySQl报错之@@GLOBAL.GTID_PURGED can only be set when @@GLOBAL.GTID_MODE = ON 导入的时候加入-f参数即可 原因分 ...

  6. photo型的object转byte[]

    IEnumerable en = (IEnumerable) myObject; byte[] myBytes = en.OfType<byte>().ToArray(); TypeCon ...

  7. 文鹏教育_jmeter培训_逻辑控制器_循环取样器

    软件测试高端专家培训 QQ 讨论群498721021 网站http://www.szwpinfo.com   深圳文鹏教育jmeter 性能测试讲义 一.ForEach控制器在jmeter菜单中的位置 ...

  8. CentOS 7 升级 Linux 内核

    一.升级内核 1.更新仓库 yum -y update 2.用 ELRepo 仓库 rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org ...

  9. Flack--SQLAlchemy

    SQLAlchemy 一. 介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB API之上,使用关系对象映射进行数据库操作,简言之便是:将类和对象转换成SQL,然后使 ...

  10. sql语句case when 以及left()

    select count(CASE jyje WHEN '1300' THEN '2' ELSE '1' END) as count  from tpent_orders where cplx = 6 ...