jQuery实现动态加载瀑布流


Posted in jQuery onSeptember 01, 2020

jquery实现瀑布流,供大家参考,具体内容如下

案例分析

  • 首先,它的每个图片是等宽的
  • 其次,除第一排正常显示其余的图片都会显示在上一排中高度最小的那个图片的下面
  • 最后,就是根据最矮图片所在位置的宽高来,决定绝对定位设置图片显示的位置

效果图

jQuery实现动态加载瀑布流

实现步骤

html结构

<div class="container">
 <div class="box">
 <div class="content"><img src="./image/1.jpg" alt=""></div>
 </div>
 <div class="box">
 <div class="content"><img src="./image/2.jpg" alt=""></div>
 </div>
 <div class="box">
 <div class="content"><img src="./image/3.jpg" alt=""></div>
 </div>

 </div>
</div>

css样式

具体就是对每个boxdiv浮动并设置样式

* {
 padding: 0;
 margin: 0;
 }

 .box {
 position: relative;
 float: left;
 margin: 10px;
 }

 .content {
 padding: 15px;
 border: 1px solid #ccc;
 box-shadow: 0 0 5px #ccc;
 border-radius: 10px;
 }

 .content img {
 width: 200px;
 height: auto;
 }

js(jquery)代码

主要是根据一排中高度最小的宽度个高度进行绝对定位的设置

<script>
 $(function () {
 //jQuery代码
 imgLocation()
 
 function imgLocation() {
 var box = $('.box')
 var num = Math.floor($(window).width() / box.eq(0).width())
 var boxHeights = []
 box.each(function (index, value) {
 var boxHeight = box.eq(index).height()
 if (index < num) {
 boxHeights[index] = boxHeight
 } else {
 var minHeight = Math.min.apply(null, boxHeights)
 var minIndex = $.inArray(minHeight, boxHeights)
 $(value).css({
 'position': 'absolute',
 'top': minHeight,
 'left': box.eq(minIndex).position().left
 });
 boxHeights[minIndex] += box.eq(index).height()
 }
 })
 }
 })
</script>

根据鼠标的滚动动态的加载图片

案例分析

这里的动态是主要是模仿动态加载数据(伪动态)

  • 首先,根据鼠标滚动的大小和界面的高度判断是否要动态加载
  • 其次,就是访问数据,并动态形成jquery数据类型
  • 最后,把生成的数据追加的.container中进行显示

效果图

jQuery实现动态加载瀑布流

实现步骤

  • htmlcss的代码都一样这里就不重复写了
  • js代码

主要是判断什么时候新增图片数据,新增后插入到模板就行了

其中的dataImg就是模仿的假数据

var dataImg = { 'data': [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }] }
 window.onscroll = function () {
 if (scrollside()) {
 $.each(dataImg.data, function (index, value) {
 var html = `<div class="box">
 <div class="content"><img src="./image/${value.src}" alt=""></div>
 </div>`
 $(html).appendTo($('.container'))
 })
 imgLocation()
 }
 }
 function scrollside() {
 var box = $('.box')
 var lastboxHeight = box.last().get(0).offsetTop
 var documentHeight = document.body.scrollHeight + 130
 var scrollHeight = $(document).scrollTop()
 console.log(lastboxHeight, scrollHeight, documentHeight)
 return (lastboxHeight < scrollHeight + documentHeight) ? true : false
 }


oxHeight, scrollHeight, documentHeight)
 return (lastboxHeight < scrollHeight + documentHeight) ? true : false
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 #jQuery
jQuery编写QQ简易聊天框
Aug 27 #jQuery
jQuery实现简单QQ聊天框
Aug 27 #jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 #jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 #jQuery
jQuery实现评论模块
Aug 19 #jQuery
jQuery实现简单评论功能
Aug 19 #jQuery
You might like
php实现的简易扫雷游戏实例
2015/07/09 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
html下载本地
2006/06/19 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
Javascript中replace()小结
2015/09/30 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
PyQt5每天必学之事件与信号
2018/04/20 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
opencv与numpy的图像基本操作
2019/03/08 Python
django表单的Widgets使用详解
2019/07/22 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
仓管员岗位责任制
2014/02/19 职场文书
职称评定自我鉴定
2014/03/18 职场文书
初三学生个人自我评定
2014/04/06 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
2014年项目工作总结
2014/11/24 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
Redis 常见使用场景
2021/08/30 Redis
java代码实现空间切割
2022/01/18 Java/Android