一行JavaScript代码如何实现瀑布流布局


Posted in Javascript onDecember 11, 2020

写在前面

一行 JavaScript 代码究竟可以完成什么布局?今天我们就来用一行 JavaScript 代码完成经典布局的一种,瀑布流布局。
所谓的瀑布流布局就是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。

瀑布流的特点:

  • 琳琅满目: 整版以图片为主,大小不一的图片按照一定的规律排列。
  • 唯美: 图片的风格以唯美的图片为主。
  • 操作简单: 在浏览网站的时候,只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前。

效果图如下所示

一行JavaScript代码如何实现瀑布流布局

当然了 这个样式使用原生 JS 一行代码肯定是不能完成的,这就需要今天的主角登场了:Masonry 插件闪亮登场!!!!!

Masonry 插件是什么

Masonry是 jQuery 实现瀑布流布局的插件,可以把 Masonry 看做是 CSS 的浮动布局。

无论排列的元素是水平浮动的还是垂直浮动的,Masonry都是根据网格先垂直排列元素,再水平排列元素,就像修墙一样。

配置 Masonry 相当简单,只需要在 jQuery 脚本中简单的使用.masonry()方法来包装容器元素。根据具体布局效果,可能需要制定一个选项。

Masonry 插件的使用方法

1、引入 masonry 插件:masonry 插件的使用是依赖于 jQuery 的,所以必须按照顺序进行引入:

<!-- 1. 引入 jQuery 文件 -->
<script src="./library/jQuery 1.12.4.js"></script>
<!-- 引入 masonry 插件 -->
<script src="./library/masonry/masonry.pkgd.js"></script>

2、HTML 页面结构

  • 定义一个容器元素
  • 在容器元素中所有元素呈现瀑布流效果

示例代码如下所示

<div id="container">
 <img class="grid-item" src="./imgs/1.png">
</div>

定位瀑布流布局的容器元素,并调用 masonry() 核心方法

masonry() 核心方法的简单应用

masonry() 核心方法的简单用法,传入一个 options 参数,该参数具有两个可选项

  • itemSelector : 默认值是 .item ,指定哪些子元素将用作布局中的项元素(选择器)
  • columnWidth : 一列的宽度,如果默认的话是第一个项目宽度

示例代码如下所示:

$('#container').masonry({
 // itemSelector : 默认值是 .item ,指定哪些子元素将用作布局中的项元素(选择器)
 itemSelector: '.grid-item'
})

测试 dome

示例代码如下

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>瀑布流布局插件</title>
 <!-- 1. 引入 jQuery 文件 -->
 <script src="./library/jQuery 1.12.4.js"></script>
 <!-- 引入 masonry 插件 -->
 <script src="./library/masonry/masonry.pkgd.js"></script>
 <style>
  img {
   display: block;
   width: 300px;
   margin: 5px;
   float: left;
  }

  #container {
   width: 940px;
   margin: 0 auto;
  }
 </style>
</head>

<body>
<div id="container">
 <img class="grid-item" src="./imgs/1.png">
 <img class="grid-item" src="./imgs/2.png">
 <!--此处省略若干行图片-->
 <img class="grid-item" src="./imgs/9.png">
 <img class="grid-item" src="./imgs/10.png">
</div>
 <script>
  $('#container').masonry({
   // itemSelector : 默认值是 .item ,指定哪些子元素将用作布局中的项元素(选择器)
   itemSelector: '.grid-item'
  })
 </script>
</body>

</html>

最终执行的结果如上图。

哈哈哈 最终还是一行 JS 代码

$('#container').masonry({itemSelector: '.grid-item'})

到此这篇关于JavaScript代码如何实现瀑布流布局的文章就介绍到这了,更多相关JS实现瀑布流布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery实用技巧必备(中)
Nov 03 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
react中hook介绍以及使用教程
Dec 11 #Javascript
js实现菜单跳转效果
Dec 11 #Javascript
jquery实现拖拽小方块效果
Dec 10 #jQuery
js实现弹幕墙效果
Dec 10 #Javascript
jQuery实现简单弹幕制作
Dec 10 #jQuery
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 #Vue.js
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 #Javascript
You might like
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
node.js调用C++函数的方法示例
2018/09/21 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
python类参数self使用示例
2014/02/17 Python
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
调试Python程序代码的几种方法总结
2015/04/28 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
财会自我鉴定范文
2013/12/27 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
学习保证书范文
2014/04/30 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
大学生求职信怎么写
2015/03/19 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书