zoukankan      html  css  js  c++  java
  • jQuery+masonry实现瀑布流

    1. 增加jQuery组件 <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js "></script>
    2. 增加 masonry 组件 <script src="https://npmcdn.com/masonry-layout@4.0.0/dist/masonry.pkgd.min.js "></script>
    3. 插入<div class="grid" id="grid">

      <div class="grid-item">

      <img />

      </div>

        </div>

    1. 初始化组件

      var $grid = $('.grid').masonry({

              itemSelector: '.grid-item',

              columnWidth: 228,

          });

          $grid.masonry('layout');

       

    2. 动态载入

    function Loading() {

        $.ajax({

            url: "images.html",

            cache: false,

            async: true,

            /*dataType: html,

            global: true,*/

            success: function(html) {

                //隐藏加载动态图标

                //HideLoading();

     

                var $grid = $('.grid').masonry({

                    itemSelector: '.grid-item',

                    columnWidth: 228,

                });

     

                var $items = $(html).find('.grid-item');

                $grid.append($items)

                    // add and lay out newly appended items

                    .masonry('appended', $items);

            }

        });

    }

     

  • 相关阅读:
    前端基础之CSS
    前端基础之HTML(三)
    前端基础之HTML(二)
    前端基础之HTML(一)
    面向对象总结
    内置函数总结
    函数部分总结
    文件操作总结
    基础数据类型总结
    python基础知识总结
  • 原文地址:https://www.cnblogs.com/my4piano/p/5379233.html
Copyright © 2011-2022 走看看