js+jquery+css3
（原生js+jquery+css3）
前言
项目需求要弄个瀑布流的页面，用的是waterfall这个插件，感觉还是可以的，项目赶就没自己的动手写。最近闲来没事，就自己写个。大致思路理清楚，还是挺好实现的...
原生javascript版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流-javascript</title>
<style>
*{margin:0;padding:0;}
#content{position: relative;margin:0 auto;}
.box{padding:10px;float: left;}/*首行浮动，第二行开始绝对定位*/
.box img{width: 180px;height:auto;display: block;}
</style>
<script>
window.onload=function(){
waterfall('content','box'); //改变窗口大小时，重新排列
window.onresize = function(){
waterfall('content','box');
} //如果数据不够，没出现滚动条，自动加载数据
var time=setInterval(function(){
if(checkscrollside()){
addDate();//插入数据
waterfall('content','box');//加载完数据从新排列
}else{
clearInterval(time);
window.onscroll=function(){
if(checkscrollside()){
addDate();
waterfall('content','box');
};
}
}
},1000) }
// 数据插入
function addDate(){
var dataInt=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg'];//模拟数据，也可以是对象
var oParent = document.getElementById('content');
for(var i=0;i<dataInt.length;i++){//循环插入数据
var oBox=document.createElement('div');
oBox.className='box';
oParent.appendChild(oBox);
var oImg=document.createElement('img');
oImg.src='./img/'+dataInt[i];
oBox.appendChild(oImg);
}
}
//主函数
function waterfall(parentID,childClass){
var oParent=document.getElementById(parentID);
var arrBox=getClassObj(parentID,childClass);// getClassObj()获取子class的数组
var iBoxW=arrBox[0].offsetWidth;// 获取瀑布流块的宽度
var num=Math.floor(document.documentElement.clientWidth/iBoxW);//计算窗口能容纳几列
oParent.style.width=iBoxW*num+'px';//设置父级宽度
var arrBoxH=[];//数组，用于存储每列中的所有块框相加的高度
for(var i=0;i<arrBox.length;i++){//遍历数组瀑布流 块
var boxH=arrBox[i].offsetHeight;//获取当前块的高度
if(i<num){
arrBox[i].style.cssText="";//防止用户改变窗口大小，到时样式出错
arrBoxH[i]=boxH; //第一行中的num个块box 先添加进数组arrBoxH
}else{
var minH=Math.min.apply(null,arrBoxH);//获取数组arrBoxH中的最小值minH
var minHIndex=getminHIndex(arrBoxH,minH);//遍历数组获取最小值minH的索引
arrBox[i].style.position='absolute';//设置绝对位移
arrBox[i].style.top=minH+'px';
arrBox[i].style.left=minHIndex*iBoxW+'px';//也可以直接获取arrBox[minHIndex].offsetLeft
arrBoxH[minHIndex]+=arrBox[i].offsetHeight;//添加后，更新最小列高
}
}
}
//获取子class的数组
function getClassObj(parentID,childClass){
var oParent=document.getElementById(parentID);
var allChildObj=oParent.getElementsByTagName('*');//获取父级下的所有子集
var childObj=[];//创建一个数组 用于收集子元素
for (var i=0;i<allChildObj.length;i++) {//遍历子元素、判断类别、压入数组
if (allChildObj[i].className==childClass){
childObj.push(allChildObj[i]);
}
};
return childObj;
}
//获取数组最小值的索引
function getminHIndex(arr,minH){
for(var i in arr){
if(arr[i]==minH){
return i;
}
}
}
// 判断滚动条是否到底部
function checkscrollside(){
var arrBox=getClassObj("content",'box');
//获取最后一个瀑布流块的高度：距离网页顶部(实现未滚到底就开始加载)
var lastBoxH=arrBox[arrBox.length-1].offsetTop;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//获取滚动条卷走的高度
var documentH=document.documentElement.clientHeight;//显示页面文档的高
return (lastBoxH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数
}
</script>
</head>
<body>
<div id="content">
<div class="box"><img src="img/0.jpg" alt=""></div>
<div class="box"><img src="img/1.jpg" alt=""></div>
<div class="box"><img src="img/2.jpg" alt=""></div>
<div class="box"><img src="img/3.jpg" alt=""></div>
<div class="box"><img src="img/4.jpg" alt=""></div>
<div class="box"><img src="img/5.jpg" alt=""></div>
<div class="box"><img src="img/6.jpg" alt=""></div>
<div class="box"><img src="img/7.jpg" alt=""></div>
<div class="box"><img src="img/8.jpg" alt=""></div>
<div class="box"><img src="img/9.jpg" alt=""></div>
<div class="box"><img src="img/10.jpg" alt=""></div>
</div>
</body>
</html>
jquery版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流-jquery</title>
<style>
*{margin:0;padding:0;}
#content{position: relative;margin:0 auto;}
.box{padding:10px;float: left;}
.box img{width: 180px;height:auto;display: block;}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
waterfall(); //改变窗口大小时，重新排列
$(window).resize(function(){
waterfall();
}) //如果数据不够，没出现滚动条，自动加载数据
var time=setInterval(function(){
if(checkscrollside()){
addDate();//插入数据
waterfall();//加载完数据从新排列
}else{
clearInterval(time);
$(window).scroll(function(){
if(checkscrollside()){
addDate();
waterfall();
};
})
}
},1000) })
// 数据插入
function addDate(){
var dataInt=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg'];//模拟数据，也可以是对象
var oParent = $('#content');
for(var i=0;i<dataInt.length;i++){//循环插入数据
oParent.append('<div class="box"><img src="./img/'+dataInt[i]+'" alt=""></div>');
}
}
//主函数
function waterfall(){
var arrBox=$('#content').children('.box');// box对象
var iBoxW=arrBox.eq(0).innerWidth();// 获取瀑布流块的宽度,注意width(),跟innerWidth()的区别
var num=Math.floor($(window).width()/iBoxW);//计算窗口能容纳几列
$('#content').css('width',iBoxW*num);//设置父级宽度
var arrBoxH=[];//数组，用于存储每列中的所有块框相加的高度
for(var i=0;i<arrBox.length;i++){//遍历数组瀑布流 块
var boxH=arrBox.eq(i).innerHeight();//获取当前块的高度
if(i<num){
arrBox.eq(i).attr('style','');//防止用户改变窗口大小，到时样式出错
arrBoxH[i]=boxH; //第一行中的num个块box 先添加进数组arrBoxH
}else{
var minH=Math.min.apply(null,arrBoxH);//获取数组arrBoxH中的最小值minH
var minHIndex=$.inArray(minH,arrBoxH);//使用jquery提供的工具
arrBox.eq(i).css({'position':'absolute','top':minH,'left':minHIndex*iBoxW});//设置定位
arrBoxH[minHIndex]+=arrBox.eq(i).innerHeight();//添加后，更新最小列高
}
}
}
// 判断滚动条是否到底部
function checkscrollside(){
var arrBox=$('#content').children('.box');
//获取最后一个瀑布流块的高度：距离网页顶部(实现未滚到底就开始加载)
var lastBoxH=arrBox.eq(arrBox.length-1).offset().top;
var scrollTop=$(window).scrollTop()//获取滚动条卷走的高度
var documentH=$(window).height();;//显示页面文档的高
return (lastBoxH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数
}
</script>
</head>
<body>
<div id="content">
<div class="box"><img src="img/0.jpg" alt=""></div>
<div class="box"><img src="img/1.jpg" alt=""></div>
<div class="box"><img src="img/2.jpg" alt=""></div>
<div class="box"><img src="img/3.jpg" alt=""></div>
<div class="box"><img src="img/4.jpg" alt=""></div>
<div class="box"><img src="img/5.jpg" alt=""></div>
<div class="box"><img src="img/6.jpg" alt=""></div>
<div class="box"><img src="img/7.jpg" alt=""></div>
<div class="box"><img src="img/8.jpg" alt=""></div>
<div class="box"><img src="img/9.jpg" alt=""></div>
<div class="box"><img src="img/10.jpg" alt=""></div>
</div>
</body>
</html>
大致思路
1.先让第一行的浮动
2.计算第一行的每个块的高度
3.遍历第一行之后的每一个块，逐个放在最小高度的下面
4.加载数据插入最后，再重新计算
注意点
a.原生js
1.定义了getClassObj()函数用于获取class类的对象，方便调用。考虑了兼容性 getElementsByClassName
2.定义了getminHIndex()函数用户获取最小值的索引
3.设置块与块之间的距离最好用padding，这样的话offsetHeight可以直接获取得到高度。如果设置margin则得多加个外边距的距离
4.代码中设置了定时器加载数据，其实可以省略，只要保证第一次加载的数据能满屏就可以。如果没出现滚动条的话onscroll事件是不会执行到的。也就没办法加载数据了
5.代码中的计算宽度也可以修改，设计的页面是定宽的瀑布流的话。这里主要是做了响应式的处理
var arrBox=getClassObj(parentID,childClass);// getClassObj()获取子class的数组
var iBoxW=arrBox[0].offsetWidth;// 获取瀑布流块的宽度
var num=Math.floor(document.documentElement.clientWidth/iBoxW);//计算窗口能容纳几列
oParent.style.width=iBoxW*num+'px';//设置父级宽度
6.每设置一块位移，都要在列高的数组上增加数值，防止块重叠
arrBox[i].style.position='absolute';//设置绝对位移
arrBox[i].style.top=minH+'px';
arrBox[i].style.left=minHIndex*iBoxW+'px';//也可以直接获取arrBox[minHIndex].offsetLeft
arrBoxH[minHIndex]+=arrBox[i].offsetHeight;//添加后，更新最小列高
b.jquery
1.思路是跟js一样的，只是jquery封装了很多方法，让我们简便的就实现了
2.注意width(),跟innerWidth()的区别。前者只能获取宽度值（不包括补白padding）
css3版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流-css3</title>
<style>
*{margin:0;padding:0;}
#content{margin:0 auto;position: relative;width:1200px;column-count:6;-moz-column-count:6;-webkit-column-count:6;}
.box{padding:10px;width: 180px;}
.box img{width: 180px;height:auto;display: block;}
</style>
<script>
window.onload=function(){
//如果数据不够，没出现滚动条，自动加载数据
var time=setInterval(function(){
if(checkscrollside()){
addDate();//插入数据
}else{
clearInterval(time);
window.onscroll=function(){
if(checkscrollside()){
addDate();
};
}
}
},1000) }
// 数据插入
function addDate(){
var dataInt=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg'];//模拟数据，也可以是对象
var oParent = document.getElementById('content');
for(var i=0;i<dataInt.length;i++){//循环插入数据
var oBox=document.createElement('div');
oBox.className='box';
oParent.appendChild(oBox);
var oImg=document.createElement('img');
oImg.src='./img/'+dataInt[i];
oBox.appendChild(oImg);
}
}
//获取子class的数组
function getClassObj(parentID,childClass){
var oParent=document.getElementById(parentID);
var allChildObj=oParent.getElementsByTagName('*');//获取父级下的所有子集
var childObj=[];//创建一个数组 用于收集子元素
for (var i=0;i<allChildObj.length;i++) {//遍历子元素、判断类别、压入数组
if (allChildObj[i].className==childClass){
childObj.push(allChildObj[i]);
}
};
return childObj;
}
// 判断滚动条是否到底部
function checkscrollside(){
var arrBox=getClassObj("content",'box');
//获取最后一个瀑布流块的高度：距离网页顶部(实现未滚到底就开始加载)
var lastBoxH=arrBox[arrBox.length-1].offsetTop;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//获取滚动条卷走的高度
var documentH=document.documentElement.clientHeight;//显示页面文档的高
return (lastBoxH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数
}
</script>
</head>
<body>
<div id="content">
<div class="box"><img src="img/0.jpg" alt=""></div>
<div class="box"><img src="img/1.jpg" alt=""></div>
<div class="box"><img src="img/2.jpg" alt=""></div>
<div class="box"><img src="img/3.jpg" alt=""></div>
<div class="box"><img src="img/4.jpg" alt=""></div>
<div class="box"><img src="img/5.jpg" alt=""></div>
<div class="box"><img src="img/6.jpg" alt=""></div>
<div class="box"><img src="img/7.jpg" alt=""></div>
<div class="box"><img src="img/8.jpg" alt=""></div>
<div class="box"><img src="img/9.jpg" alt=""></div>
<div class="box"><img src="img/10.jpg" alt=""></div>
</div>
</body>
</html>
注意点
1.滚动加载还是得另外加js
2.加载的数据，是竖向排列的。体验不是很友好
3.有兼容性问题，Internet Explorer 10 +
知识有限，写的东西有不足或者错误信息还望各路大神指点指点，共勉进步。
所谓成功，就是不停地经历失败，并且始终保持热情...
js+jquery+css3的更多相关文章
- 瀑布流的三种实现方式（原生js+jquery+css3）
前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...
- Arctext.js - 基于 CSS3 & jQuery 的文本弯曲效果
Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布.虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路 ...
- 整屏滚动效果 jquery.fullPage.js插件+CSS3实现
最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- jQuery+CSS3文字跑马灯特效
jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...
- jquery css3问卷答题卡翻页动画效果
这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- jQuery+css3 弹幕
写了个基于jQuery+css3的弹幕功能,此功能面向手机wap,利用改变位移做弹幕功能会使一些性能低的手机浏览器卡,所以用了css3,此功能不支持非webkit内核浏览器 html部分 自己设置样式 ...
- jQuery+CSS3实现404背景动画特效
效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...
随机推荐
- Android Gson深入分析
眼下解析json有三种工具:org.json(Java经常使用的解析),fastjson(阿里巴巴project师开发的).Gson(Google官网出的).解析速度最快的是Gson,下载地址:htt ...
- SharePoint 2013 Designer 自己定义操作菜单
众所周知,我们在SharePoint的二次开发中,常常会加入ECB菜单或者Ribbon菜单,通常我们会採取Feature的方式去加入一个Xml,或者採取JavaScript的方式.当然.除此之外,还能 ...
- iOS UISearchBar学习笔记
UISearchBar 是一个搜索控件,它提供了一个文本输入框,一个查找button,一个书签button.一个取消button.我们须要使用UISearchBarDelegate代理来进行查找工作. ...
- oracle添加用户及权限
CREATE USER qdcenter 用户名 IDENTIFIED BY qdcenter 密码 DEFAULT TABLESPACE data1 默认表空间 TEMPORARY TABLE ...
- matlab GUI之常用对话框（三）-- dialog \ errordlg \ warndlg \ helpdlg \ msgbox \questdlg
常用的对话框(三) 1.普通对话框 dialog 调用格式: h=dialog('PropertyName','PropertyValue'......) %普通对话框 h=dialog( ]); ...
- Bash shell使用环境的终端的环境设置：stty
Bash shell使用环境的终端的环境设置:stty Bash shell使用环境的终端的环境设置:stty stty -a 将当前所有的stty参数列出来 intr:给正在运行的程序发送中断信号 ...
- PHP弱类型：WordPress Cookie伪造
1 PHP弱类型 PHP是弱类型语言,所以变量会因为使用场景的不同自动进行类型转换.PHP中用 == 以及 != 进行相等判断时,会自动进行类型转换,用 === 以及 !== 进行判断时不会自动转换类 ...
- 07-2. A+B和C (15)
给定区间[-231, 231]内的3个整数A.B和C,请判断A+B是否大于C. 输入格式: 输入第1行给出正整数T(<=10),是测试用例的个数.随后给出T组测试用例,每组占一行,顺序给出A.B ...
- C语言２
函数是C语言的基本单位,类是java,c#,c++的基本单位 int abs(int x); double fabs(double x); 按变量的存储方式:静态变量.自动变量.寄存器变量 指针就 ...
- 15-C语言结构体
目录: 一.大型软件开发 二.头文件和static 三.结构体 四.联合 五.枚举 回到顶部 一.大型软件开发 将一个代码中的内容,拆分成多个文件,最后的可执行文件只要一个. 操作步骤: 1 原来只有 ...