一行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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
JavaScript 动态改变图片大小
Jun 11 Javascript
javascript中的变量是传值还是传址的?
Apr 19 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
写一个Vue Popup组件
Feb 25 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 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
php在window iis的莫名问题的测试方法
2013/05/14 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
JavaScript中的其他对象
2008/01/16 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
python使用pil生成缩略图的方法
2015/03/26 Python
python生成器generator用法实例分析
2015/06/04 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
重构Python代码的六个实例
2020/11/25 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
小孩百日宴答谢词
2014/01/15 职场文书
家长对老师的评语
2014/04/18 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
冰峪沟导游词
2015/02/09 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python