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

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

百度一下大家都在用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. jquery修改input的值，vue获取不到的解决办法

    $("input[name='aa']").val(2333) //触发一下该input的input事件 $("input[name='aa']")[0].di ...

  2. RN 各种小问题

    问题:vs code 无法启动 双击无反应 方法:控制台 输入 netsh winsock reset 重启 vs 问题:RN Debugger Network 不显示 源网页:https://git ...

  3. 关于git merge，rebase合并的差别，以及*(no branch)的处理。

    1.merge 在上篇介绍分支的时候有简单的说了一下分支的创建和合并,当时合并就是写的merge,这是依据两个不同分支的最后一次提交的commit对象c5,c7和两个分支的交叉点的commit对象c3 ...

  4. RAMOS和SSD对比

    http://bbs.pcbeta.com/forum.php?mod=redirect&goto=findpost&ptid=1786284&pid=48341400RAMO ...

  5. ssh登录原理及免密登录配置

    ssh登录原理参考: https://www.cnblogs.com/hukey/p/6248468.html ssh登录有两种方式: 1):用户名密码登录 2):基于秘钥的登录 ssh免密登录指的就 ...

  6. rocketmq(三 java操作rocket API, rocketmq 幂等性)

    JAVA操作rocketmq: 1.导入rocketmq所需要的依赖: <dependency> <groupId>com.alibaba.rocketmq</group ...

  7. 好玩的PIL

    原图(下面的代码全为部分)不喜欢的一个库 缩小的代码 from PIL import Image im=Image.open('tupian.jpg') im.thumbnail(128,128)) ...

  8. ASP.NET core 2.1部署到 Centos 7

    步骤要点: 一.关闭Centos selinux: 操作方式: 1.永久关闭:打开/etc/selinux/config文件,设置SELINUX=disabled,注意,不是SELINUXTYPE=d ...

  9. day1--一个简单的登录接口

    _usrename = "Yvan"_password = "abc123"count=0while count <3:    username = in ...

  10. Navicat premium 12破解版

    下载Navicat  Premium 12和破解补丁Navicat_Keygen_Patch,底部有下载地址.下载之后安装Navicat,安装成功后先不要打开,然后打开破解补丁,破解补丁不需要安装,双 ...