利用js写的一个瀑布流
利用js写的一个瀑布流
并且实现滚动条的实时刷新
css文件源码：
*{
margin: 0px;
padding: 0px;
}
#container{
position: relative;
}
.box{
padding: 5px;
float: left;
}
.box_img{
padding: 5px;
border: 1px solid #cccccc;
box-shadow: 0px 0px 5px #ccc;
border-radius: 5px;
}
.box_img img{
width: 150px;
height: auto;
}
js文件源码
window.οnlοad=function(){
imgLocation("container","box");
var jsonimg={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"}]};
window.οnscrοll=function(){
if(checkescroll()){
var parent=document.getElementById("container");
for(var i=0;i<jsonimg.data.length;i++){
var box=document.createElement("div");
box.className="box";
parent.appendChild(box);
var box_img=document.createElement("div");
box_img.className="box_img";
box.appendChild(box_img);
var img=document.createElement("img");
img.src="images/"+jsonimg.data[i].src;
box_img.appendChild(img);
}
imgLocation("container","box");
}
}
}
function checkescroll(){
var cparent=document.getElementById("container");
var cchild=getChildElement(cparent,"box");
var endchildtotop=cchild[cchild.length-1].offsetTop;
var pageheight=document.documentElement.clientHeight||document.body.clientHeight;
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
if(endchildtotop<(pageheight+scrolltop)){
return true;
}
}
function imgLocation(parent,content){
var iparent=document.getElementById(parent);
var ichild=getChildElement(iparent,content);
var imgwidth=ichild[0].offsetWidth;
var cols=parseInt(document.documentElement.clientWidth/imgwidth);
iparent.style.cssText="width:"+cols*imgwidth+"px;margin:0 auto";
var boxarr=[];
for(var i=0;i<ichild.length;i++){
if(i<cols){
var height=ichild[i].offsetHeight;
boxarr.push(height);
}
else{
var minheight=Math.min.apply(null,boxarr);
var indexminheight=getMinHeightindex(boxarr,minheight);
ichild[i].style.position="absolute";
ichild[i].style.top=minheight+"px";
ichild[i].style.left=ichild[indexminheight].offsetLeft+"px";
boxarr[indexminheight]=minheight+ichild[i].offsetHeight;
}
}
}
function getMinHeightindex(boxarr,minheight){
for(var i in boxarr){
if(boxarr[i]==minheight){
return i;
}
}
}
function getChildElement(parent,content){
var elementArray=[];
var allchild=parent.getElementsByTagName("*");
for(var i=0;i<allchild.length;i++){
if(allchild[i].className==content){
elementArray.push(allchild[i]);
}
}
return elementArray;
}
HTML源码：
<head> <meta charset="UTF-8">
<title>JS实现的瀑布流</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/waterfall.js">
</script>
</head>
<body>
<div id="container">
<div class="box">
<div class="box_img">
<img src="images/0.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/2.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/3.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/4.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/5.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/6.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/7.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/8.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/9.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/10.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/11.jpg">
</div>
</div>
<div class="box"> <div class="box_img"> <img src="images/12.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/13.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/14.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/15.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/16.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/17.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/18.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/19.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/20.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/21.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/22.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/23.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/24.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/25.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/26.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/27.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/28.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/29.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/30.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/31.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/32.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/33.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/34.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/35.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/36.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/37.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/38.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/39.jpg"> </div> </div></div></body>
转载于:https://www.cnblogs.com/YangMT/p/4867272.html
- 点赞
- 收藏
- 分享
- 文章举报
amwxytu75574
发布了0 篇原创文章 · 获赞 0 · 访问量 102
私信
关注
- 利用three.js画一个3D立体的正方体示例代码
- [置顶] 利用jquery和原生Js封装一个上传图片的组件
- 利用JS实现简单的瀑布流加载图片效果
- js利用div背景，做一个竖线的效果。
- js 利用throw 写的一个小程序
- 利用jQuery来扩展一个瀑布流插件
- 利用ace.js编写一个JavaScript编辑器(带智能补全)
- 利用js和JQuery定义一个导航条菜单
- iOS开发：一个瀑布流的设计与实现（已实现缓存池功能，该功能使得瀑布流cell可以循环利用）
- 利用JS跨域做一个简单的页面访问统计系统
- 利用JS写一个 随机验证码的验证，同时忽略大小写
- 原生 JS 实现一个瀑布流插件
- 利用vue.js写一个购物车结算
- 利用JS实现一个简单的二级联动菜单
- JS函数基础，利用函数模块化编程求一个数的阶乘和
- 利用JS做的一个网页安全色调色板
- 利用bootstrap和js完成一个简易的文件上传按钮
- 利用JS跨域做一个简单的页面訪问统计系统
- js利用点击事件做一个简单的计算器
- 利用three.js 实际开发的一个实例