Masonry與AmazeUI結合實現瀑布流

時間 2019-12-11

標籤 masonry amazeui 結合實現瀑布欄目悠閒生活简体版

原文原文鏈接

作一個圖片列表展現，因爲照片數量太多，決定用瀑布流來實現css

因爲以前沒有接觸過瀑布流，不知從何下手html

百度一下你們都在用Masonrynode

官網 https://masonry.desandro.com/jquery

這是某網站提供的一個demo http://www.jq22.com/yanshi10136git

看了一下它的代碼，因爲本人是小白，感受實現起來很複雜，決定找別的解決方案github

網站框架用的是妹子UI，有沒有結合妹子實現的瀑布流呢。web

這裏是AmazeUI某插件官方提供的一個demo http://amazeui.github.io/masonry/docs/panel.htmlapp

它的代碼很簡單，也容易理解框架

比葫蘆畫瓢，本身將它改造了一下，用到了項目中網站

<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 : {})

相關標籤/搜索

amazeui+masonry+ajax+tp5+h5

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。