js插件---瀑布流Masonry
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的更多相关文章
- bootstrap+masonry.js写瀑布流
最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要 ...
- 原生JS实现瀑布流
浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...
- 用js实现瀑布流的一种简单方法
现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...
- js实现瀑布流的一种简单方法实例分享
现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- [JS练习] 瀑布流照片墙
记录JS实现瀑布流照片墙效果 首先是前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 多栏布局与JS实现瀑布流
css3属性之多栏布局与JS实现瀑布流 背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使用的次数少,更多的时间使用了百分比,浮动和定位解决 ...
- js原生瀑布流
背景: 1.在移动端开发,jq文件是显得非常庞大的,所以所有效果尽量用HTML5和原生js实现. 2.本次瀑布流是固定列数,采用非浮动的另外一种瀑布流思想实现的. 3.本次数据来源是json接口 4. ...
- vue.js实现瀑布流之vue-waterfall-easy
想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易. 但是,随着时代的发展,随着时代的进步..... 算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上 ...
随机推荐
- Java XSSF 导出excel 工具类
参数解释: title:导出excel标题.headers 导出到excel显示的列头. columns 对应数据库字段 .list 导出数据1.pox中添加依赖 <dependency> ...
- 链表(list)--c实现
做c的开发有1年多了,期间写过c++,感觉基础不够好,补上去,不丢人.o(^▽^)o to better myself. #include <stdio.h> #include <s ...
- caioj 1154 同余方程(模版)
求x的最小正整数解,使得ax=b(mod m) 那么显然ax - b = m * y ax - my = b 那么就套入Ax+By = K的不定方程中,然后用exgcd求解即可 但这道题求最大正整数解 ...
- solr在windows下的安装及配置
solr在windows下的安装及配置 首先,solr是基于Java开发的,所以使用的话需要先进行java环境的配置,在Java环境配置好之后就可以去http://www.apache.org/dyn ...
- Qt之水平/垂直布局(QBoxLayout、QHBoxLayout、QVBoxLayout)
简述 QBoxLayout可以在水平方向或垂直方向上排列控件,由QHBoxLayout.QVBoxLayout所继承. QHBoxLayout:水平布局,在水平方向上排列控件,即:左右排列. QVBo ...
- Ubuntu设置显示桌面快捷键
Ubuntu设置显示桌面快捷键 直接在系统设置中没有效果, 学习了:http://www.cnblogs.com/pluse/p/5286585.html 需要进行安装compizconfig,然后在 ...
- 代理server poll version
poll和select一样,管理多个描写叙述符也是进行轮询,依据描写叙述符的状态进行处理,可是poll没有最大文件描写叙述符数量的限制,select is 1024/2048 #include &qu ...
- hdu4089Activation 概率dp
//一条队列对于第一个人的情况 //概率p1:队列保持不变 //p2:第一个人到队尾 //p3:第一个人出队 //p4:系统崩溃 //队列中有N个人,Tomato 在第M位置,求系统崩溃.Tomato ...
- iOS 9 适配,我咋还没遇到这么多坑呢呀
iOS 9 适配,我咋还没遇到这么多坑呢呀 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 ...
- ES6中includes、startsWith、endsWith
es6新增includes:返回布尔值,表示是否找到字符串.startsWith:返回布尔值,表示字符串是否在源字符串的头部位置.endsWith:返回布尔值,表示参数字符串是否在源字符串尾部. va ...