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


Posted in Javascript onJanuary 27, 2016

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属性所以都是垂直放置的)

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

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;
}

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

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

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;//返回所有的子节点
}

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

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

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;//返回所有的子节点
}

效果:

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

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;//返回所有的子节点
}

效果:

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

Javascript 相关文章推荐
WEB 浏览器兼容 推荐收藏
May 14 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
JavaScript 学习历程和心得分享
Dec 12 Javascript
JqGrid web打印实现代码
May 31 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
JS二维数组的定义说明
Mar 03 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
总结js函数相关知识点
Feb 27 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 #Javascript
js实现简单排列组合的方法
Jan 27 #Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 #Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 #Javascript
jQuery ajax分页插件实例代码
Jan 27 #Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 #Javascript
jquery ajax分页插件的简单实现
Jan 27 #Javascript
You might like
php Smarty模板生成html文档的方法
2010/04/12 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
基于python实现文件加密功能
2020/01/06 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
canvas烟花特效锦集
2018/01/17 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
员工自我鉴定范文
2013/10/06 职场文书
2014年平安夜寄语
2014/12/08 职场文书
优秀党员事迹材料
2014/12/18 职场文书
安全温馨提示语大全
2015/07/14 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python