基于JavaScript实现瀑布流效果(循环渐近)

2024-09-29 17:41:25

1.建立Html模版

想法是先用一个div container承载所有内容,然后div box用来放置图片,最后div box_border来当图片框,代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
</head>
<body>
<div class="container" id="container">
<div class="box_border" id="box_border">

<div class="box" id="box1">
<img src="image/01.jpg">
</div>
<!--把Box复制多份,这里因为代码重复省略了-->
</div>
</div>
</body>
</html>

效果:(未设置css属性所以都是垂直放置的)

2.通过css简单设置样式

主要设置水平放置,相框颜色,边界之类的

/*
边界不留空,背景黑灰
*/
body{
margin: 0px;
background: darkgray;
}
/*
总布局设置为相对布局
*/
.container{
position: relative;
}
/*
设置box属性
*/
.box{
padding: 5px;
float: left;
}
/*设置图片边框阴影和圆角
*/
.box_border{
padding: 5px;
border: 1px solid #cccccc;
box-shadow: 0px 0px 5px #ccc;
border-radius: 5px;
}
/*设置图片格式*/
.box_border img{
width: 150px;
height: auto;
}

效果:(边框什么都有了)

3.JS控制每一行所摆放的图片个数

上面的css布局之后,浏览器窗口大小改变,里面的图片数量也会改变,现在要用JS固定住每一行的图片数量,对于不同尺寸的屏幕都能做到很好的效果

/*
用于加载其他函数
*/
window.onload = function(){
setImgLocation("container");
}
/*
设置图片个数
*/
function setImgLocation(parent){
var cparent = document.getElementById(parent);//得到父节点
var childArray = getChildNodes(cparent);//得到图片数量
var imgWidth = childArray[0].offsetWidth;//获取照片宽度
var screenWidth = document.documentElement.clientWidth;//获取浏览器宽度
var count = Math.floor(screenWidth/imgWidth);//每行的个数
cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//设置其宽度并居中

}
/*
获取全部图片的个数
*/
function getChildNodes(parent){
var childArray =[];//定义一个数组存放图片box
var tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点
//循环添加class为box的节点
for(var i = 0;i<tempNodes.length;i++){
if(tempNodes[i].className == "box"){
childArray.push(tempNodes[i]);
}
}
return childArray;//返回所有的子节点
}

效果图:针对不同屏幕大小显示的个数是不一样的

4.JS实现静态瀑布流

先实现静态的布局,也就是浏览器下拉不会自动刷新出新的图片.

实现排列算法很简单

1.把第一排图片的高度全部存到一个数组
2.计算出第一排中的图片的最小高度和对应位置
3.把第一排之后的第一个图片放到该位置上
4.重新设置该位置的高度为两个图片相加
5.循环2剩余全部图片

代码:

/*
用于加载其他函数
*/
window.onload = function(){
setImgLocation("container");
}
/*
设置图片个数及位置排列
*/
function setImgLocation(parent){
var cparent = document.getElementById(parent);//得到父节点
var childArray = getChildNodes(cparent);//得到图片数量
var imgWidth = childArray[0].offsetWidth;//获取照片宽度
var screenWidth = document.documentElement.clientWidth;//获取浏览器宽度
var count = Math.floor(screenWidth/imgWidth);//每行的个数
cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//设置其宽度并居中
//定义数组,存放第一行照片高度
var imgHArray = [];
//循环遍历图片
for(var i=0;i<childArray.length;i++){
//如果图片在第一行则获取高度
if(i<count){
imgHArray[i] = childArray[i].offsetHeight;
}else//否则把最小高度的填充剩余图片
{
var minHeight = Math.min.apply(null,imgHArray);//获取最小高度
var minIndex = getMinIndex(minHeight,imgHArray);//获取最小高度对应的下标
childArray[i].style.position = "absolute";//设置要填充的图片盒子为绝对布局,否则不能更换位置
childArray[i].style.top = minHeight+"px";//设置要填充图片距顶高度
childArray[i].style.left = childArray[minIndex].offsetLeft+"px";//设置要填充图片距左高度
imgHArray[minIndex] += childArray[i].offsetHeight;//填充后把当前位置高度设为两个图片相加
//开始下一轮循环
}

}

}
/*
获取最小高度对应的下标
*/
function getMinIndex(minHeight,imgHArray){
for(var i in imgHArray){
if(imgHArray[i] == minHeight){
return i;
}
}
}
/*
获取全部图片的个数
*/
function getChildNodes(parent){
var childArray =[];//定义一个数组存放图片box
var tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点
//循环添加class为box的节点
for(var i = 0;i<tempNodes.length;i++){
if(tempNodes[i].className == "box"){
childArray.push(tempNodes[i]);
}
}
return childArray;//返回所有的子节点
}

效果:

5.js实现动态加载

动态加载也就是滚动条永远滑不到底部,要解决动态加载我们需要考虑两个问题:

1.什么时候加载?

滑动距离+浏览器高度>最后一张图片距离顶部的距离

2.怎样加载?

通过创建新的节点,把创建的节点添加进去即可

最终代码:

/*
用于加载其他函数
*/
window.onload = function() {
var cparent = document.getElementById("container");//得到父节点
setImgLocation(cparent);
//设置加载的图片
var data = ["image/01.jpg", "image/02.jpg", "image/03.jpg", "image/04.jpg", "image/05.jpg", "image/06.jpg", "image/07.jpg", "image/08.jpg", "image/09.jpg",
"image/11.jpg", "image/12.jpg", "image/13.jpg", "image/14.jpg", "image/15.jpg", "image/16.jpg", "image/17.jpg"];
//滑动监听
window.onscroll = function () {
if (checkLoad(cparent)) {
for (var i = 0; i < data.length; i++) {
//创建新的节点
var div1 = document.createElement("div");
div1.className = "box";
var div2 = document.createElement("div");
div2.className = "box_border";
var img = document.createElement("img");
img.className = ".box_border img";
img.src = data[i];
div2.appendChild(img);
div1.appendChild(div2);
cparent.appendChild(div1);
}
setImgLocation(cparent);//创建节点后重新排列
}
}
}
/*
检查是否应该加载
*/
function checkLoad(cparent){
var childArray = getChildNodes(cparent);//得到图片个数
var lastImgHight = childArray[childArray.length-1].offsetTop;//得到最后一张图片距离顶部高度
var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;//获得滑动距离(浏览器兼容性真烦人)
var browserHeight = document.documentElement.clientHeight;//获得浏览器高度
if(lastImgHight < scrollHeight+browserHeight){//判断是否加载
return true;
}else {
return false;
}
}
/*
设置图片个数及位置排列
*/
function setImgLocation(cparent){
var childArray = getChildNodes(cparent);//得到图片数量
var imgWidth = childArray[0].offsetWidth;//获取照片宽度
var browserWidth = document.documentElement.clientWidth;//获取浏览器宽度
var count = Math.floor(browserWidth/imgWidth);//每行的个数
cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//设置其宽度并居中
//定义数组,存放第一行照片高度
var imgHArray = [];
//循环遍历图片
for(var i=0;i<childArray.length;i++){
//如果图片在第一行则获取高度
if(i<count){
imgHArray[i] = childArray[i].offsetHeight;
}else//否则把最小高度的填充剩余图片
{
var minHeight = Math.min.apply(null,imgHArray);//获取最小高度
var minIndex = getMinIndex(minHeight,imgHArray);//获取最小高度对应的下标
childArray[i].style.position = "absolute";//设置要填充的图片盒子为绝对布局,否则不能更换位置
childArray[i].style.top = minHeight+"px";//设置要填充图片距顶高度
childArray[i].style.left = childArray[minIndex].offsetLeft+"px";//设置要填充图片距左高度
imgHArray[minIndex] += childArray[i].offsetHeight;//填充后把当前位置高度设为两个图片相加
//开始下一轮循环
}
}
}
/*
获取最小高度对应的下标
*/
function getMinIndex(minHeight,imgHArray){
for(var i in imgHArray){
if(imgHArray[i] == minHeight){
return i;
}
}
}
/*
获取全部图片的个数
*/
function getChildNodes(parent){
var childArray =[];//定义一个数组存放图片box
var tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点
//循环添加class为box的节点
for(var i = 0;i<tempNodes.length;i++){
if(tempNodes[i].className == "box"){
childArray.push(tempNodes[i]);
}
}
return childArray;//返回所有的子节点
}

效果:

三个js循环的关键字示例(for与while)

循环的三种写法: <!doctype html> <title>js循环 by 我们</title> <meta charset="utf-8"/> <meta name="keywords" content="js循环 by 我们" /> <meta name="description" content="js循环 by 我们" />
深入探究JavaScript中for循环的效率问题及相关优化

Underscore.js库你一天(一周)内写了多少个循环了? var i; for(i = 0; i < someArray.length; i++) { var someThing = someArray[i]; doSomeWorkOn(someThing); } 这当然无害,但这种写法非常丑而且奇怪,这也不是真正需要抱怨的.但这种写法太平庸了. var i, j; for(i = 0; i < someArray.length; i++) { var someThing = some
理解javascript中Map代替循环

本文介绍了map给我们的js编程带来的好处及便利: 1.Map能干什么 map可以实现for循环的功能: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> var arr = ['val1', 'val2'
高性能JavaScript循环语句和条件语句

一.循环语句众所周知,常用的循环语句有for.while.do-while以及for-in,forEach.除了for-in和forEach性能略低外,平时我们对前三者的选择更多的是基于需求而非性能考虑,今天我们就对它们各自的性能做个测试,告诉我们最极端的情况下还能做哪些优化. 首先我们来谈谈为何for-in和forEach会比其他的慢.for-in一般是用在对象属性名的遍历上的,由于每次迭代操作会同时搜索实例本身的属性以及原型链上的属性,所以效率肯定低下:而forEach是基于函数的迭代(需
JavaScript中循环遍历Array与Map的方法小结

js循环数组各种方法 eg1: for (var i = 0; i < myStringArray.length; i++) { alert(myStringArray[i]); //Do something } eg2: Array.prototype.foo = "foo!"; var array = ['a', 'b', 'c']; for (var i in array) { alert(array[i]); } for(var i in this.$GLOBAL_DET
javascript实现label标签跳出循环操作

出场: 首先我们来说说为什么需要label标签,虽然我们已经知道有break,continue跳出循环,但如果是多重循环那么它们就显的无能为力了,所以就出现了label这个标签来为我们服务. 我们先来看看单独使用break的情况 for(var i=0;i<4;i++){ for(var j=0;j<4;j++){ if(i===1&&j===1){ break; }else{ console.log("i:"+i+"--j:"+j);
javascript每日必学之循环

朋友们大家好,今天,我们继续接着前面的内容讲,前们我们已经讲了条件分支,今天我们就讲循环,顾名思义就是,重复执行相同的操作,正常循环是受程序控制的,不正常的情况,就会出现死循环,那就是我们的代码中出现bug,那样,我们还要学会调式bug,等我们先把基础知识讲完了之后,我还会专门用篇幅来讲解浏览器里面的调试,那种程序就会在我们掌控之中,这才是我们想要结果. 循环包括的结构体有 for , while , do--while,for循环有两种形式的存在,一种是数字变量变化所引起的循环,另一种就是fo
javascript图片切换综合实例（循环切换、顺序切换）

本文实例为大家介绍了javascript图片切换的两种方式,循环切换以及顺序切换的实例代码,分享给大家供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <style> p{margin:0;} input{border:none;outline: none;margin:0;padding:0;} img{width:300px;height:300px;} #loop{margin-le
理解JS事件循环

伴随着JavaScript这种web浏览器脚本语言的普及,对它的事件驱动交互模型,以及它与Ruby.Python和Java中常见的请求-响应模型的区别有一个基本了解,对您是有益的.在这篇文章中,我将解释一些JavaScript并发模型的核心概念,包括其事件循环和消息队列,希望能够提升你对一种语言的理解,这种语言你可能已经在使用但也许并不完全理解. 这篇文章是写给谁的? 这篇文章是针对在客户端或服务器端使用或计划使用JavaScript的web开发人员的.如果你已经精通事件循环,那么这篇文章的大部
js实现异步循环实现代码

问题实现异步循环时,你可能会遇到问题. 让我们试着写一个异步方法,一次循环打印一次循环的索引值. <script> for(var i = 0; i < 5; i++){ setTimeout(function(){ document.writeln(i);document.writeln("<br />"); },1000); } </script> 如上程序的输出为: 5 5 5 5 5 原因每次时间结束(timeout)都指向原始的i

基于JavaScript实现瀑布流效果(循环渐近)

相关推荐

随机推荐