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

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

百度一下大家都在用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. vscode setting

    { "files.autoSave": "onFocusChange", "window.openFilesInNewWindow": tr ...

  2. .NET Windows服务开发流程

    前段时间做一个数据迁移项目,刚开始用B/S架构做的项目,但B/S要寄存在IIs中,而IIs又不稳定因素,如果重启IIs就要打开页面才能运行项目.有不便之处,就改用Windows服务实现.这篇就总结下, ...

  3. TypeScript: this bind 和 回调的正确用法

    TypeScript 中如果传递了 而且在回调函数中用了this 的话, 就要小心了, 这个this 不一定是指向当前类对象了,如果想确保指向的还是那个对象的话, 需要在传递那个方法的时候, 先调用b ...

  4. 2016310Exp4 恶意代码及分析

    网络对抗 Exp4 恶意代码分析 实验内容 系统运行监控 恶意软件分析 报告评分 基础问题回答 实践目标 实验内容 1. 系统运行监控——计划任务 2. 系统运行监控——利用Sysmon 3.1恶意软 ...

  5. Linux安装/升级pip

    Linux安装/升级pip 1.执行脚本 # wget https://bootstrap.pypa.io/get-pip.py # 如果没有 wget,先安装 wget # yum -y insta ...

  6. 去中心化存储项目终极指南 | Filecoin, Storj 和 PPIO 项目技术对比（下）

    在上篇文章中,我们主要从价值定位.技术层次架构.服务质量.去中心化程度,和经济激励机制五个方面分析了三个项目的不同.在这一篇文章中,我们将着重从区块链的架构设计.数据传输技术设计和数据存储技术设计三方 ...

  7. 再说项目 Dec 27th 2018

    其实对于任何项目来说,最难不是开发或者系统等技术的问题,反而是需求的问题,需求一直变,一直定不下来,导致流程变来变去,系统方案层面也确定不下来.而需求的问题,归根结底还是人的问题.项目的关键用户对现有 ...

  8. redis 安装与使用

    到git 官网上下载redis: DownLoad,选择.zip 压缩包 2. 下载后,对zip 包进行解压,解压后如下: 3. 配置并安装redis, 打开window dos 窗口,将目录切换到解 ...

  9. Oracle根据主键获取对应表，Oracle根据外键获取相关表

    Oracle根据主键获取对应表 select * from user_constraints a, USER_CONS_COLUMNS b where a.CONSTRAINT_TYPE = 'P' ...

  10. 配置NFS

    主机端 sudo apt-get install nfs-kernel-server 修改配置文件 sudo vim /etc/exports 添加: /home/nfs/fs_qtopia *(rw ...