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 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jquery传参及获取方式(两种方式)
Feb 13 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/08/19 PHP
9个比较实用的php代码片段
2016/03/15 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
ASP中Sub和Function的区别说明
2020/08/30 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
vue路由传参三种基本方式详解
2019/12/09 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
使用Python生成随机密码的示例分享
2016/02/18 Python
Python requests库用法实例详解
2018/08/14 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
事业单位分类改革实施方案
2014/03/21 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
个人租房协议书
2014/04/09 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
暑假安全保证书
2015/02/28 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏