三、jQuery--jQuery实践--瀑布流布局
实现方法：
1、JavaScript
2、jQuery
3、CSS多栏布局
法一：
window.onload=function(){
waterfall('main','pin');
var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
window.onscroll=function(){
if(checkscrollside()){
var oParent = document.getElementById('main');// 父级对象
for(var i=0;i<dataInt.data.length;i++){
var oPin=document.createElement('div'); //添加 元素节点
oPin.className='pin'; //添加 类名 name属性
oParent.appendChild(oPin); //添加 子节点
var oBox=document.createElement('div');
oBox.className='box';
oPin.appendChild(oBox);
var oImg=document.createElement('img');
oImg.src='./images/'+dataInt.data[i].src;
oBox.appendChild(oImg);
}
waterfall('main','pin');
};
}
}
/*
parend 父级id
pin 元素id
*/
function waterfall(parent,pin){
var oParent=document.getElementById(parent);// 父级对象
var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin
var iPinW=aPin[0].offsetWidth;// 一个块框pin的宽
var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式：定宽+自动水平外边距
var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
for(var i=0;i<aPin.length;i++){//遍历数组aPin的每个块框元素
var pinH=aPin[i].offsetHeight;
if(i<num){
pinHArr[i]=pinH; //第一行中的num个块框pin 先添加进数组pinHArr
}else{
var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH
var minHIndex=getminHIndex(pinHArr,minH);
aPin[i].style.position='absolute';//设置绝对位移
aPin[i].style.top=minH+'px';
aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';
//数组 最小高元素的高 + 添加上的aPin[i]块框高
pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高
}
}
}
/****
*通过父级和子元素的class类 获取该同类子元素的数组
*/
function getClassObj(parent,clsName){
var obj=parent.getElementsByTagName('*');//获取 父级的所有子集
var pinS=[];//创建一个数组 用于收集子元素
for (var i=0;i<obj.length;i++) {//遍历子元素、判断类别、压入数组
if (obj[i].className==clsName){
pinS.push(obj[i]);
}
};
return pinS;
}
/****
*获取 pin高度 最小值的索引index
*/
function getminHIndex(arr,minH){
for(var i in arr){
if(arr[i]==minH){
return i;
}
}
}
function checkscrollside(){
var oParent=document.getElementById('main');
var aPin=getClassObj(oParent,'pin');
var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性
var documentH=document.documentElement.clientHeight;//页面高度
return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数
}
通过类名去获取元素的方法:
<!doctype html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<ul id="list">
<li class="on">1</li>
<li class="select">2</li>
<li class="on">3</li>
<li>4</li>
</ul>
<p class="on">class为on的p标签</p>
</body> </html>
<script type="text/javascript">
window.onload = function() {
var len1 = getByClass("on", "list");
alert(len1.length); // 结果等于2为正确
var len2 = getByClass("on");
alert(len2.length); // 结果等于3为正确
} function getByClass(clsName, parent) {
//定义函数getByClass()实现获取document或指定父元素下所有class为on的元素
var clsArr = [];
if (parent) {
var oParent = document.getElementById(parent);
var oClass = oParent.getElementsByTagName("*");
for (var i = 0; i < oClass.length; i++) {
if (oClass[i].className == clsName) {
clsArr.push(oClass[i])
}
}
return clsArr;
} else {
var oClass = document.getElementsByTagName("*");
for (var i = 0; i < oClass.length; i++) {
if (oClass[i].className == clsName) {
clsArr.push(oClass[i])
}
}
return clsArr;
}
}
</script>
法二：
$(window).on("load", function() {
waterfall('main', 'pin');
var dataInt = { 'data': [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }] };
window.onscroll = function() {
if (checkscrollside()) {
$.each(dataInt.data, function(index, value) {
var $oPin = $('<div>').addClass('pin').appendTo($("#main"));
var $oBox = $('<div>').addClass('box').appendTo($oPin);
$('<img>').attr('src', './images/' + $(value).attr('src')).appendTo($oBox);
});
waterfall();
};
}
});
/*
parend 父级id
pin 元素id
*/
function waterfall(parent, pin) {
var $aPin = $("#main>div");
var iPinW = $aPin.eq(0).outerWidth(); // 一个块框pin的宽
var num = Math.floor($(window).width() / iPinW); //每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
//oParent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//设置父级居中样式：定宽+自动水平外边距
$("#main").width(iPinW * num).css("margin","0 auto");
// $("#main").css({
// 'width:': iPinW * num,
// 'margin':'0 auto'
// });
var pinHArr = []; //用于存储 每列中的所有块框相加的高度。
$aPin.each(function(index, value) {
var pinH = $aPin.eq(index).outerHeight();
if (index < num) {
pinHArr[index] = pinH; //第一行中的num个块框pin 先添加进数组pinHArr
} else {
var minH = Math.min.apply(null, pinHArr); //数组pinHArr中的最小值minH
var minHIndex = $.inArray(minH, pinHArr);
$(value).css({
'position': 'absolute',
'top': minH + 15,
'left': $aPin.eq(minHIndex).position().left
});
//数组 最小高元素的高 + 添加上的aPin[i]块框高
pinHArr[minHIndex] += $aPin.eq(index).outerHeight() + 15; //更新添加了块框后的列高
}
});
}
function checkscrollside() {
var $aPin = $("#main>div");
var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height() / 2); //创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
var scrollTop = $(window).scrollTop() //注意解决兼容性
var documentH = $(document).width(); //页面高度
return (lastPinH < scrollTop + documentH) ? true : false; //到达指定高度后 返回true，触发waterfall()函数
}
法三：
.container {
-webkit-column-width: 197px;
-moz-column-width: 197px;
-o-column-width: 197px;
-ms-column-width: 197px;
/* -webkit-column-gap: 5px;
-moz-column-gap: 5px;
-o-column-gap: 5px;
-ms-column-gap: 5px; */
}
/*数据块 砖块*/
.container {
padding: 10px;
}
.container div {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
width:165px;
margin-bottom:10px;
}
.container div img {
display: block;
width: 165px;
height: auto;
}
CSS3和JS瀑布流实现方式比较：
JS原生方式：
1 需要计算列数=浏览器窗口的宽度/图片宽度
图片定位是需要根据每一列数据块的高度计算接下来图片的位置
2 图片排序是按照图片计算的位置横向排序，位置是计算出来的比较规范
CSS3方式：
1 不需要计算，浏览器自动计算，只需设置列宽，性能高
2 列宽随着浏览器窗口大小进行改变，用户体验不好
3 图片排序按照垂直顺序排序，打乱图片显示顺序
4 图片加载还是依靠JS来完成
5 浏览器兼容也不是很好
（说明：由于使用CSS3多栏布局来实现瀑布流有很大的局限性，所以上面的CSS3实现方式的代码只有多栏分列的部分，没有继续完成js的部分，最好还是使用JS或者jQuery来完成即可。）
三、jQuery--jQuery实践--瀑布流布局的更多相关文章
- jquery实现简单瀑布流布局
jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
- jquery实现简单瀑布流布局（续）：图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
- Ajax+json+jquery实现无限瀑布流布局
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 使用jquery+css实现瀑布流布局
虽然可以直接使用css实现瀑布流布局,但显示的方式有点问题,所以这儿就直接使用jquery+css来实现瀑布流布局,最终效果如下: 思路是通过将每个小块的position设置为relativ ...
- jQuery Wookmark Load 瀑布流布局实例演示
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
- AJAX+json+jquery实现预加载瀑布流布局
宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片 加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的 在ff等支持css3可以显 ...
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
- jQuery Wookmark 瀑布流布局
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
- Jquery瀑布流布局
瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些, ...
随机推荐
- Effective Java 学习笔记之创建和销毁对象
一.考虑用静态工厂方法代替构造器 1.此处的静态工厂方法是指返回指为类的对象的静态方法,而不是设计模式中的静态工厂方法. 2.静态工厂方法的优势有: a.使用不同的方法名称可显著地表明两个静态工厂方法 ...
- Unity内存申请和释放
转自:http://www.jianshu.com/p/b37ee8cea04c 1.资源类型 GameObject, Transform, Mesh, Texture, Material, Shad ...
- 关于promise（一）
该新特性属于 ECMAScript 2015(ES6)规范,在使用时请注意浏览器兼容性. 由于ES6原生提供Promise,所以无需安装Promise库.但在ES5环境下我们可以使用bluebird库 ...
- HDNOIP普及+提高整合
好久没有更新博客了...这几天一直在切 HDNOIP... 正式时跪惨了...所以考完后回来奋力切出了所有题. [COJ3351]HDNOIP201601回文质数 试题描述 回文数是具有对称性的自然数 ...
- Struts2 Action 动态传参数
Struts2的两个Action之间传参的问题. 需求功能是这样:Action1 获取数据库配置内容,得到相应Model的 动态URL ,这里的URL 有的是Action有的是JSP页面. 1.使用r ...
- OI总结（垃圾排版就忽略了吧）
学OI一年了,到现在联赛所需要的知识已经基本学完了.现在,有必要回过头来,总结总结自己一年来学到的知识以及得到的经验教训. 基础 语言基础 C++的语言基础啥的就略了吧. 算法复杂度分析 O:复杂度的 ...
- VS无法启动调试：“生成下面的模块时,启用了优化或没有调试信息“
调试项目遇到错误提示,Visual Studio 2010(或VS2008或VS2005)启动调试的时候,弹出提示信息: 生成下面的模块时,启用了优化或没有调试信息: C:\WINDOWS\Micro ...
- 【GoLang】golang TCP 粘包处理 示例
参考资料: http://www.01happy.com/golang-tcp-socket-adhere/
- 基础知识《八》---Java反射机制
1.反射可以做什么 2.反射相关的API 3.获取Class运行时类的实例的三种方法: 1)通过运行时类本身的.class属性***** Class clazz= Person.class; 2)通过 ...
- C#之系统自带保存属性
源代码下载链接 程序开发很多时候需要根据运行环境做不通的参数配置,通过写ini之类的文本文件是一种方法,但这种方法也同时会把数据暴露 Winform开发中可以将需要配置的字段属性保存到程序中(其实也是 ...