js插件---瀑布流Masonry

一、总结

一句话总结：还是要去看官网，比amazeui上面介绍的详细很多

1、瀑布流的原理是什么？

给外层套好相对定位，里面的每一个弄好绝对定位，然后计算出每一个的left和top即可。

2、瀑布流如何使用？

a、指定外层，这里是#container

b、给里面的每一个套上.item

c、指定不同列之间的间距，columnWidth:

当然，你需要事先定好.item的宽度

124 <script>

125 var container = document.querySelector('#container');

126 var msnry = new Masonry( container, {

127   itemSelector: '.item',

128   columnWidth: 30

129 });

130 </script>

二、瀑布流Masonry

百度盘下载：

链接：https://pan.baidu.com/s/1G0SMIGsfcszT8WfzUMvxUA 密码：qaex

官网地址：https://masonry.desandro.com/options.html

1、截图

 

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <link rel="stylesheet" href="Css/amazeui.min.css">

     <script src="Scripts/jquery.min.js"></script>

     <script src="Scripts/amazeui.min.js"></script>

     <script src="Scripts/masonry.pkgd.min.js"></script>

     <style>

         .item{

             width: 30%;

         }

     </style>

 </head>

 <body>

     <div id="container" style="padding-left: 30px;">

         <div class="item">

             <section class="am-panel am-panel-default">

               <header class="am-panel-hd">

                 <h3 class="am-panel-title">面板标题</h3>

               </header>

               <div class="am-panel-bd">

                 面面板内容容面板内容面板内容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容

               </div>

             </section>

         </div>

         <div class="item">

             <section class="am-panel am-panel-default">

               <header class="am-panel-hd">

                 <h3 class="am-panel-title">面板标题</h3>

               </header>

               <div class="am-panel-bd">

                 面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容

               </div>

             </section>

         </div>

         <div class="item">

             <section class="am-panel am-panel-default">

               <header class="am-panel-hd">

                 <h3 class="am-panel-title">面板标题</h3>

               </header>

               <div class="am-panel-bd">

                 面板内容

               </div>

             </section>

         </div>

         <div class="item">

             <section class="am-panel am-panel-default">

               <header class="am-panel-hd">

                 <h3 class="am-panel-title">面板标题</h3>

               </header>

               <div class="am-panel-bd">

                 面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容

               </div>

             </section>

         </div>

         <div class="item">

             <section class="am-panel am-panel-default">

               <header class="am-panel-hd">

                 <h3 class="am-panel-title">面板标题</h3>

               </header>

               <div class="am-panel-bd">

                 面板内容板内容容面板内容面板内容面板内容

               </div>

             </section>

         </div>

                 <div class="item">

             <section class="am-panel am-panel-default">

               <header class="am-panel-hd">

                 <h3 class="am-panel-title">面板标题</h3>

               </header>

               <div class="am-panel-bd">

                 面面板内容容面板内容面板内容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容

               </div>

             </section>

         </div>

         <div class="item">

             <section class="am-panel am-panel-default">

               <header class="am-panel-hd">

                 <h3 class="am-panel-title">面板标题</h3>

               </header>

               <div class="am-panel-bd">

                 面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容

               </div>

             </section>

         </div>

         <div class="item">

             <section class="am-panel am-panel-default">

               <header class="am-panel-hd">

                 <h3 class="am-panel-title">面板标题</h3>

               </header>

               <div class="am-panel-bd">

                 面板内容

               </div>

             </section>

         </div>

         <div class="item">

             <section class="am-panel am-panel-default">

               <header class="am-panel-hd">

                 <h3 class="am-panel-title">面板标题</h3>

               </header>

               <div class="am-panel-bd">

                 面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容面板内容板内容容面板内容面板内容

               </div>

             </section>

         </div>

         <div class="item">

             <section class="am-panel am-panel-default">

               <header class="am-panel-hd">

                 <h3 class="am-panel-title">面板标题</h3>

               </header>

               <div class="am-panel-bd">

                 面板内容板内容容面板内容面板内容面板内容

               </div>

             </section>

         </div>

     </div>

 </body>

 <script>

 var container = document.querySelector('#container');

 var msnry = new Masonry( container, {

   itemSelector: '.item',

   columnWidth: 30

 });

 </script>

 </html>

三、官网使用截取

HTML

Include the Masonry .js file in your site.

<script src="/path/to/masonry.pkgd.min.js"></script>

Masonry works on a container grid element with a group of child items.

<div class="grid">

  <div class="grid-item">...</div>

  <div class="grid-item grid-item--width2">...</div>

  <div class="grid-item">...</div>

  ...

</div>

CSS

All sizing of items is handled by your CSS.

.grid-item { width: 200px; }

.grid-item--width2 { width: 400px; }

Initialize with jQuery

You can use Masonry as a jQuery plugin: $('selector').masonry().

$('.grid').masonry({

  // options

  itemSelector: '.grid-item',

  columnWidth: 200

});

Initialize with Vanilla JavaScript

You can use Masonry with vanilla JS: new Masonry( elem, options ). The Masonry() constructor accepts two arguments: the container element and an options object.

var elem = document.querySelector('.grid');

var msnry = new Masonry( elem, {

  // options

  itemSelector: '.grid-item',

  columnWidth: 200

});

// element argument can be a selector string

//   for an individual element

var msnry = new Masonry( '.grid', {

  // options

});

Initialize in HTML

You can initialize Masonry in HTML, without writing any JavaScript. Add data-masonry attribute to the container element. Options can be set in its value.

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
 

js插件---瀑布流Masonry的更多相关文章

  1. bootstrap+masonry.js写瀑布流

    最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要 ...

  2. 原生JS实现瀑布流

    浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...

  3. 用js实现瀑布流的一种简单方法

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

  4. js实现瀑布流的一种简单方法实例分享

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

  5. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  6. [JS练习] 瀑布流照片墙

    记录JS实现瀑布流照片墙效果 首先是前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. 多栏布局与JS实现瀑布流

    css3属性之多栏布局与JS实现瀑布流 背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使用的次数少,更多的时间使用了百分比,浮动和定位解决 ...

  8. js原生瀑布流

    背景: 1.在移动端开发,jq文件是显得非常庞大的,所以所有效果尽量用HTML5和原生js实现. 2.本次瀑布流是固定列数,采用非浮动的另外一种瀑布流思想实现的. 3.本次数据来源是json接口 4. ...

  9. vue.js实现瀑布流之vue-waterfall-easy

    想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易. 但是,随着时代的发展,随着时代的进步..... 算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上 ...

随机推荐

  1. Manacher 求最长回文子串算法

    Manacher算法,是由一个叫Manacher的人在1975年发明的,可以在$O(n)$的时间复杂度里求出一个字符串中的最长回文子串. 例如这两个回文串“level”.“noon”,Manacher ...

  2. CentOS7 部署SVN服务器

    服务器端:svnserver 安装主要步骤 yum install subversion rpm -ql subversion mkdir /application/svndata mkdir /ap ...

  3. C语言回调

    来源:https://www.cnblogs.com/jiangzhaowei/p/9129105.html 1. 什么是回调函数? 回调函数,光听名字就比普通函数要高大上一些,那到底什么是回调函数呢 ...

  4. 压缩和还原压缩的JS代码

    压缩JS代码:packer – 最好用的 javascript 压缩工具地址: http://dean.edwards.name/packer/ http://kan.willin.org/?page ...

  5. 国庆 day 3 上午

    a[问题描述] 你是能看到第一题的 friends 呢. ——hja 怎么快速记单词呢?也许把单词分类再记单词是个不错的选择.何大爷给 出了一种分单词的方法,何大爷认为两个单词是同一类的当这两个单词的 ...

  6. C语言中static的使用

    在开发过程中.我们常常会须要定义一些static类型的变量或者函数.我们接下来来详细聊一下static: 1.修饰变量 当static来修饰一个变量时,就注定了这个变量的可见范围和生命周期: (1)当 ...

  7. 转：百分百激活office for mac2011的激活文件

    方法:1点击finder             2点击系统盘             3点击资源库             4找到Preferences文件夹             5用压缩包里的 ...

  8. JavaWeb利用cookie记住账号

    JavaWeb利用cookie记住账号. 首先,来看看界面什么样子. 记住账号最普遍的做法,就是在点击登录时,将账号保存到cookie中. 材料准备 <script src="${ct ...

  9. 微信公众号开发将war包导入新浪sae出现错误

    JAVA_Error: Error for /wechat.do java.lang.NoSuchFieldError: INSTANCE at org.apache.http.impl.io.Def ...

  10. hdoj--5256--序列变换(lis变形)

    序列变换 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...