一行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 相关文章推荐
ExtJs使用IFrame的实现代码
Mar 24 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
原生JS实现多条件筛选
Aug 19 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
php广告加载类用法实例
2014/09/23 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
电子信息专业学生自荐信
2013/11/09 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
Spring实现内置监听器
2021/07/09 Java/Android