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开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jQuery zTree如何改变指定节点文本样式
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常用文件操作函数汇总
2014/11/22 PHP
php中Ctype函数用法详解
2014/12/09 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python使用sorted排序的方法小结
2017/07/28 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
python 一维二维插值实例
2020/04/22 Python
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
财务分析个人的自荐书范文
2013/11/24 职场文书
自主招生自荐信格式
2013/12/03 职场文书
市场开发与营销专业求职信
2013/12/31 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
布达拉宫的导游词
2015/02/02 职场文书
财务人员入职担保书
2015/09/22 职场文书
MySQL的join buffer原理
2021/04/29 MySQL