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. rem — 一个低调的css单位

    原文  http://www.zhaoan.org/1825.html rem这是个低调的 css 单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃 ...

  2. redis搭建与安装2

    第一步redis安装:1.首先确认下载包为64位的还是32位的2.下载http://code.google.com/p/servicestack/downloads3.解压下载包得到以下文件:cygw ...

  3. redis.conf配置文件配置项解析

    知识来源于 : https://blog.csdn.net/bsfz_2018/article/details/79061413[Redis在linux下的安装] daemonize:如需要在后台运行 ...

  4. WPF 内部的5个窗口之 MediaContextNotificationWindow

    原文:WPF 内部的5个窗口之 MediaContextNotificationWindow 本文告诉大家在 WPF 内部的5个窗口的 MediaContextNotificationWindow 是 ...

  5. FarPoint自动换行

    单元格自动换行 FarPoint.Win.Spread.CellType.TextCellType mType = new FarPoint.Win.Spread.CellType.TextCellT ...

  6. RIP协议的配置

    拓扑图: 要求: 理解RIP协议的工作原理,并通过 RIP 路由协议实现不同网络互通. 配置步骤: 1.配置好 PC 机的 IP 地址等參数. PC 0>ipconfig IP Address. ...

  7. Objective-C对象与Core Foundation对象

    Core Foundation 对象主要使用在用C语言编写的Core Foundation 框架中,并引用计数的对象.与Objective-C对象差别非常少.不管哪种框架生成的对象,一旦生成,便可在两 ...

  8. js中如何取精度

    js中如何取精度 一.总结 一句话总结:其实round()函数去经度会有误差,直接用num.toFixed(2)简单方便. toFixed()方法会按照指定的小数返回数值的字符串表示.var num ...

  9. spring boot 的常用注解使用 总结

    附:Spring Boot 官方文档学习(一)入门及使用见https://www.cnblogs.com/larryzeal/p/5799195.html @RestController和@Reque ...

  10. MyBatis的架构设计以及实例分析--转

    原文地址:http://blog.csdn.net/luanlouis/article/details/40422941 MyBatis是目前非常流行的ORM框架,它的功能很强大,然而其实现却比较简单 ...