一行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 跨域访问解决方案
Feb 14 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
基于jQuery的前端数据通用验证库
Aug 08 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 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
swfupload 多文件上传实现代码
2008/08/27 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
利用python程序帮大家清理windows垃圾
2017/01/15 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
python 装饰器重要在哪
2021/02/14 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
建筑公司文秘岗位职责
2013/11/29 职场文书
文案策划求职信
2014/03/18 职场文书
车辆管理制度范本
2015/08/05 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
Python基础详解之描述符
2021/04/28 Python