jQuery实现动态加载瀑布流
jquery实现瀑布流,供大家参考,具体内容如下
案例分析
- 首先,它的每个图片是等宽的
- 其次,除第一排正常显示其余的图片都会显示在上一排中高度最小的那个图片的下面
- 最后,就是根据最矮图片所在位置的宽高来,决定绝对定位设置图片显示的位置
效果图
实现步骤
html结构
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)代码
主要是根据一排中高度最小的宽度个高度进行绝对定位的设置
根据鼠标的滚动动态的加载图片
案例分析
这里的动态是主要是模仿动态加载数据(伪动态)
效果图
实现步骤
主要是判断什么时候新增图片数据,新增后插入到模板就行了
其中的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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。
热门推荐
- 返回顶部
- 3162201930
- czq8825@qq.com