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

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

百度一下大家都在用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. 没有可用软件包 libgdiplus 解决方法

    1.下载 epel-release-7-11.noarch.rpm wget http://dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/epel ...

  2. 由consequence忽然发现英语也挺有意思

    con- 是拉丁语前缀, 有 with, together 的意思. con- 和 com- 一样的. 只是因为 在 b p m 前发 m 音更方便, 所以这些音前的 con- 变为 com- (例 ...

  3. gcc ld 链接器相关知识，调试指令（程序员的自我修养----链接、装载与库）

    最近解决一个动态链接上的问题,因为以前从来没有接触过这方面的知识,所以恶补了一下,首先要了解gcc编译指令(makefile),ld链接器的选项(还有连接脚本section指定内存位置),熟悉查看连接 ...

  4. 玩了下opencv的aruco（python版）

    简单的玩了下opencv里头的aruco,用的手机相机,手机装了个 ip摄像头,这样视频就可以传到电脑上了. 首先是标定,我没打印chessboard,直接在电脑屏幕上显示,拍了17张,大概如下: 又 ...

  5. VC维的来龙去脉——转载

    VC维的来龙去脉——转载自“火光摇曳” 在研究VC维的过程中,发现一篇写的很不错的VC维的来龙去脉的文章,以此转载进行学习. 原文链接,有兴趣的可以参考原文进行研究学习 目录: 说说历史 Hoeffd ...

  6. 简单的PHP单例模式

    class MySQL { private static $instance; // 阻止外部实例化 private function __construct() { # code... } // 阻 ...

  7. react采坑笔记

    1. dva + antd input设置defaultVaule时查看时inpu有值但是页面上不显示 解决办法 设置一个key值,当key值改变从新渲染 <div key={this.prop ...

  8. ReactNative 学习笔记

    1. react-native引入第三方库时报Command `run-android` unrecognized: 在使用第三方库tab-navigator时调用: npm install reac ...

  9. mybatis学习 -每天一记 mybatis insert null 报错

    mybatis 插入数据,model的属性存在null,插入报错 在使用mybatis 进行insert时,如果字段值存在null的情况,会出现插入失败的情况,解决方案: 如果使用spring boo ...

  10. azkaban使用--传入动态参数

    转: azkaban的工作流中的参数可以分为如下几个类型:azkaban UI 页面输入参数, 环境变量参数, job作业文件中定义的参数,工作流的用户定义的属性文件,上游作业传递给下游的参数,工作流 ...