好资源导航 » 文章资讯 » jQuery实现动态加载瀑布流

jQuery实现动态加载瀑布流

2023-07-17 13:26:03 57

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

案例分析

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

效果图

实现步骤

html结构

css样式

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

*{
padding:0;
margin:0;
}

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

.content{
padding:15px;
border:1pxsolid#ccc;
box-shadow:005px#ccc;
border-radius:10px;
}

.contentimg{
width:200px;
height:auto;
}

js(jquery)代码

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

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

案例分析

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

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

效果图

实现步骤

html和css的代码都一样这里就不重复写了
js代码

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

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

vardataImg={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]}
window.onscroll=function(){
if(scrollside()){
$.each(dataImg.data,function(index,value){
varhtml=`

`
$(html).appendTo($('.container'))
})
imgLocation()
}
}
functionscrollside(){
varbox=$('.box')
varlastboxHeight=box.last().get(0).offsetTop
vardocumentHeight=document.body.scrollHeight+130
varscrollHeight=$(document).scrollTop()
console.log(lastboxHeight,scrollHeight,documentHeight)
return(lastboxHeight
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
                
            
              
            
                                    上一篇
Python Opencv图像处理基本操作代码详解
                
                                    下一篇
Python动态类型实现原理及过程解析
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            ActiveX部件不能创建对象：dm.dmsoft代码：800A01AD
                        
                                            
                            MySQL的时间差函数TIMESTAMPDIFF、DATEDIFF的用法
                        
                                            
                            Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能详解
                        
                                            
                            Vue学习笔记之计算属性与侦听器用法
                        
                                            
                            Docker镜像分层的原理详解
                        
                                            
                            详解小程序BackgroundAudioManager踩坑之旅
                        
                                            
                            vue实现数字动态翻牌的效果（开箱即用）
                        
                                            
                            vue 实现LED数字时钟效果（开箱即用）
                        
                                            
                            python实现布隆过滤器及原理解析
                        
                                            
                            Ubuntu下如何升级到PHP7.4的方法步骤
                        
                                            
                            简述PHP7.4 新特性和废弃的功能
                        
                                            
                            使用tqdm显示Python代码执行进度功能
                        
                                            
                            微信域名检测接口调用演示步骤（含PHP、Python）
                        
                                            
                            Python中six模块基础用法
                        
                                            
                            Python tkinter实现图片标注功能(完整代码)
                        
                                            
                            PyCharm 2019.3发布增加了新功能一览
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            514930285
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2024 好资源导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图