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实现文章图片弹出放大效果
Apr 06 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 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/05/12 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Request的中断和ErrorHandler实例解析
2018/02/12 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
基于python实现文件加密功能
2020/01/06 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
养殖行业的创业计划书
2014/01/05 职场文书
项目投资建议书
2014/05/16 职场文书
python开发制作好看的时钟效果
2022/05/02 Python
Python自动化实战之接口请求的实现
2022/05/30 Python