一行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简单的拖动效果实现原理及示例
Jul 26 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 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获取指定数量随机字符串的方法
2017/02/06 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
Python队列的定义与使用方法示例
2017/06/24 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
董事长职责范文
2013/11/08 职场文书
研讨会主持词
2014/04/02 职场文书
派出所所长先进事迹
2014/05/19 职场文书
男方婚前保证书
2015/02/28 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis