|
[color=rgba(58, 58, 58, 0.88)] Masonry简介[color=rgba(58, 58, 58, 0.88)]Masonry是什么？ [color=rgba(58, 58, 58, 0.88)]Masonry是一个JavaScript网格布局库。它的作用是在可用的竖直空间上将页面元素放置于页面最佳位置处，就像泥瓦匠将石头往墙上砌一样。你应该已经在网上很多地方见过它了。瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。（效果如上图） [color=rgba(58, 58, 58, 0.88)]官网： [color=rgba(58, 58, 58, 0.88)]Masonry官方文档 [color=rgba(58, 58, 58, 0.88)]Masonry中文文档 [color=rgba(58, 58, 58, 0.88)]Masonry实例DEMO 下载安装
- <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
- <!-- or -->
- <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
[color=rgba(58, 58, 58, 0.88)]1,可以从官方网站下载 [color=rgba(58, 58, 58, 0.88)]2,也可以直接在unpkg引用Masonry的CDN静态文件 基本使用
[color=rgba(58, 58, 58, 0.88)]在你的项目中引入Masonry.js - <script src=“/path/to/masonry.pkgd.min.js”></script>
[color=rgba(58, 58, 58, 0.88)]Masonry的运行需要一个包含一些列子组件的grid容器标签 - <div class=“grid”>
- <div class=“grid-item”>…</div>
- <div class=“grid-item grid-item--width2”>…</div>
- <div class=“grid-item”>…</div>
- …
- </div>
[color=rgba(58, 58, 58, 0.88)]CSS [color=rgba(58, 58, 58, 0.88)]你可以通过CSS控制所有组件的尺寸 - .grid-item { width: 200px；}
- .grid-item--width2 { width: 400px；}
[color=rgba(58, 58, 58, 0.88)]通过JQuery初始化 [color=rgba(58, 58, 58, 0.88)]你可以将Masonry作为一个JQuery插件来使用$（'selector'）.masonry（）  JavaScript
$（'.grid'）.masonry（{// optionsitemSelector: '.grid-item',columnWidth: 200}）；
主要参数
- // options
- itemSelector: '.grid-item', //附加选择器，用来指定哪些元素包裹的元素会重新排列。
- columnWidth: 200, //第1列网格的宽度，单位为像素（px）, 默认： 第一个浮动元素外宽度。
- percentPosition:true, //将元素定位设成百分比。true后，元素宽度自动适应容器的尺寸变化。
- gutter: 10, //元素水平方向的间隙
- horizontalOrder: true,
- singleMode: false,//禁用测量每个浮动元素的宽度。如浮动元素具有相同的宽度，设为true。默认 false。
- resizeable: true, // 绑定一个Masonry访问，窗口resize时布局平滑流动。默认：true。
- animate: true, // 布局重排动画。默认：false。
- animationOptions: {}, //一对动画选项，具体参数可以参考jquery .animate()中的options选项。
- appendedContent: $('.new_content'),
- // 附加选择器元素，用来尾部追加内容。
- // 在集成infinitescroll插件的情况下使用。
- saveOptions: true,
- // 默认情况下，Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项。
- // 默认：true
- stamp:'.grid-stamp',
- // 网格中的固定元素，不会因重新布局改变位置，移动元素填充到固定元素下方
- fitWidth: true, // 设置网格容器宽度等于网格宽度，这样配合css的auto margin实现居中显示
- originLeft: true, // 默认true网格左对齐，设为false变为右对齐
- originTop: true, // 默认true网格对齐顶部，设为false对齐底部
- containerStyle: { position: 'relative' }, // 设置容器样式
- stagger: '0.03s',
- //重布局时网格并不是一起变换的，排在后面的网格比前一个延迟开始，该项设置延迟时间
- initLayout: true, //初始化布局，设未true可手动初试化布局
-
- isAnimated 使用jquery的布局变化,默认true
- animationOptions animate属性渐变效果(Object { queue: false, duration: 500 })
- gutterWidth 列的间隙 Integer
- isFitWidth 自适应浏览器宽度Boolean
- isResizableL 是否可调整大小 Boolean
- isRTL 使用从右到左的布局 Boolean
|
