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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 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下安装配置fckeditor编辑器的方法
2011/03/02 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
python随机数分布random均匀分布实例
2019/11/27 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
python中怎么表示空值
2020/06/19 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
大学生年度自我鉴定
2013/10/31 职场文书
学子宴答谢词
2014/01/25 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
windows安装python超详细图文教程
2021/05/21 Python
配置nginx 重定向到系统维护页面
2021/06/08 Servers
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript