JavaScript实现瀑布流效果
来源:互联网 发布:淘宝运费价格表监控 编辑:程序博客网 时间:2024/05/29 10:07
1、HTML文件
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>js瀑布流</title><link rel="stylesheet" type="text/css" href="mystyle.css"><script src="myjs.js"></script></head><body><div id="container"><div class="box"><div class="box_img"><img src="image/a (10).jpg"></div></div><div class="box"><div class="box_img"><img src="image/a (11).jpg"></div></div><div class="box"><div class="box_img"><img src="image/a (12).jpg"></div></div><div class="box"><div class="box_img"><img src="image/a (13).jpg"></div></div><div class="box"><div class="box_img"><img src="image/a (14).jpg"></div></div><div class="box"><div class="box_img"><img src="image/a (15).jpg"></div></div><div class="box"><div class="box_img"><img src="image/a (16).jpg"></div></div><div class="box"><div class="box_img"><img src="image/a (17).jpg"></div></div><div class="box"><div class="box_img"><img src="image/a (18).jpg"></div></div><div class="box"><div class="box_img"><img src="image/a (16).jpg"></div></div><div class="box"><div class="box_img"><img src="image/a (17).jpg"></div></div> <div class="box"> <div class="box_img"> <img src="image/a (16).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (17).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (16).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (17).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (16).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (17).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (16).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (16).jpg"> </div> </div> <div class="box"> <img src="image/a (17).jpg"> <div class="box_img"> </div> </div></div></body></html>
2、js文件
window.onload=function(){imglocation("container","box"); var imgData={"data":[{"src":"a (10).jpg"},{"src":"a (11).jpg"},{"src":"a (12).jpg"},{"src":"a (13).jpg"},{"src":"a (4).jpg"},{"src":"a (15).jpg"},{"src":"a (6).jpg"}]} window.onscroll=function(){ if( checkFlag()){ var cparent=document.getElementById("container"); for(var i=0;i<imgData.length;i++){ var ccontent=document.createElement("div"); ccontent.className="box"; cparent.appendChild(ccontent); var boximg=document.createElement("div"); boximg.className="box_img"; ccontent.appendChild(boximg); var img=document.createElement("img"); img.src="image/"+imgData.data[i].src; boximg.appendChild(img); } imglocation("container","box"); } }}function checkFlag(){ var cparent=document.getElementById("container"); var ccontent=getChildelement(cparent,"box"); var lastcontntheight=ccontent[ccontent.length-1].offsetTop; var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; var pageheight=document.documentElement.clientHeight||document.body.clientHeight; if(lastcontntheight<scrolltop+pageheight){ return true; }}function imglocation(parent,content){//var cparent=document.getElementById(parent);var ccontent=getChildElement(cparent,content);var imgWidth=ccontent[0].offsetWidth;var num=Math.floor(document.documentElement.clientWidth/imgWidth);cparent.style.cssText="width:"+imgWidth*num+"px;margin 0 auto"; var BoxHeighrArr=[]; for(var i=0;i<ccontent.length;i++){ if(i<num){ BoxHeighrArr[i]=ccontent[i].offsetHeight; }else{ var minheight=Math.min.apply(null,BoxHeighrArr); var minIndex=getminheightLocation(BoxHeighrArr,minheight); ccontent[i].style.position="absolute"; ccontent[i].style.top=minheight="px"; ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px"; BoxHeighrArr[minIndex]=BoxHeighrArr[minIndex]+ccontent[i].offsetHeight; } }}function getminheightLocation(BoxHeightArr,minHeight){ for(var i in BoxHeightArr){ if(BoxHeightArr[i]==minHeight){ return i; } }}function getChildelement(parent,content){var contentarr=[];var allcontent=parent.getElementsByTagName("*");for(var i=0;i<allcontent.length;i++){ if(allcontent[i].className==content){ contentarr.push(allcontent[i]); }}return contentarr;}
3、css文件
*{margion:0px;padding:0px;}#container{position:relative;}.box{padding:5px;float:left;}.box_img{padding:5px;border:1px solid #cccccc;box-shadow: 0 0 5px #cccccc;border-radius: 5px;}.box_img img{width:100px;height:auto;}
0 0
- JavaScript实现瀑布流效果
- javascript实现瀑布流效果
- JavaScript实现瀑布流效果
- JavaScript瀑布流的实现(百度图片效果)
- JavaScript的瀑布流效果的详解及实现
- javascript实现瀑布流效果及图片加载样式
- Javascript实现瀑布流
- android 瀑布流实现效果
- 瀑布流效果怎么实现
- staggeredGridView 实现瀑布流效果
- RecycleView 实现瀑布流效果
- RecyclerView 实现瀑布流效果
- RecyclerView实现瀑布流效果
- html5实现瀑布流效果
- css3实现瀑布流效果
- js实现瀑布流效果
- CSS3实现瀑布流效果
- css实现瀑布流效果
- linux的 rm改写,防止误删,删除找回
- Centos下node安装
- 插件化开发---DroidPlugin对Servie的管理
- 35. Search Insert Position
- request请求数据包组成:请求行(request line)消息头(header)实体内容(Body)
- JavaScript实现瀑布流效果
- [源码]Android-Architecture及对MVP的理解
- android ViewPager 解决自动滑动到最后一页,继续滑动的效果问题
- 安卓-自定义标题栏组件
- 文章标题
- 点法式方程
- Apache Spark进行大数据处理 -- 第一部分:介绍
- JAVA垃圾回收机制
- 收藏的博客列表