一行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 相关文章推荐
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
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
非常不错的MySQL优化的8条经验
2008/03/24 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
jQuery插件 tabBox实现代码
2010/02/09 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
Python牛刀小试密码爆破
2011/02/03 Python
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
浅谈python3中input输入的使用
2019/08/02 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
哪些是python中web开发框架
2020/06/17 Python
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
城市创卫标语
2014/06/17 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
暑期培训班策划方案
2014/08/26 职场文书
Python机器学习之逻辑回归
2021/05/11 Python