基于JavaScript实现瀑布流效果(循环渐近)
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;//返回所有的子节点 }
效果:
-
本文向大家介绍基于jquery实现瀑布流布局，包括了基于jquery实现瀑布流布局的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家介绍了基于jquery实现瀑布流布局的关键代码，分享给大家供大家参考，具体内容如下 效果图： 具体代码： 使用jquery-1.8.3.min.js，waterfall.js代码如下： 希望本文所述对大家学习有所帮助，谢谢大家的阅读。
-
本文向大家介绍JavaScript实现瀑布流以及加载效果，包括了JavaScript实现瀑布流以及加载效果的使用技巧和注意事项，需要的朋友参考一下 一、瀑布流是个啥？ 瀑布流，是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 最早采用瀑布流布局的网站是Pinterest，逐渐在国内流行开来，比如我们熟知的百度图
-
本文向大家介绍基于jQuery实现瀑布流页面，包括了基于jQuery实现瀑布流页面的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jQuery实现瀑布流页面展示的具体代码，供大家参考，具体内容如下 views.py url.py index.html 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍ios基于UICollectionView实现横向瀑布流，包括了ios基于UICollectionView实现横向瀑布流的使用技巧和注意事项，需要的朋友参考一下 在网上找了许久，一直没有发现有提供横向瀑布流效果的。在项目中用到了我就在垂直瀑布流的基础上，进行了修改，做出了横向瀑布流的效果。同时也对一些UICollectionView的属性进行简单的注释，方便以后查阅。 1、首先要写一
-
本文向大家介绍详解IOS中如何实现瀑布流效果，包括了详解IOS中如何实现瀑布流效果的使用技巧和注意事项，需要的朋友参考一下 首先是效果演示 特点:可以自由设置瀑布流的总列数(效果演示为2列) 虽然iphone手机的系统相册没有使用这种布局效果,瀑布流依然是一种很常见的布局方式!!!下面来详细介绍如何实现这种布局. 首先使用的类是UICollectionView 我们要做的是自定义UICollect
-
实现瀑布流浏览互联网图片的界面效果。 开发者@假如你就是李四 说：最近看了几个别人写的瀑布效果源码，感觉复杂了点，于是自己通过UITableview的组合实现了下这个效果，感觉性能上应该还不错。里面用到了第三方的库（SDWebImage）和数据。 [Code4App.com]