分别使用JS和JQuery实现瀑布流以及追加效果

本文主要是介绍分别使用JS和JQuery实现瀑布流以及追加效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

分别使用JS和JQuery实现瀑布流以及追加效果

效果图
html
css/style.css
js实现瀑布流
jquery实现瀑布流
js和jquery对比代码
jquery实现瀑布追加的效果

效果图

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en" dir="ltr"><head><meta charset="utf-8"><title>瀑布流</title><link rel="stylesheet" href="css/style.css"></head><body><div id="wrap"><div><img src="images/1.png"><a href="#">第一怪 竹筒当烟袋</a></div><div><img src="images/2.png"><a href="#">第二怪 草帽当锅盖</a></div><div><img src="images/3.png"><a href="#">第三怪 这边下雨那边晒</a></div><div><img src="images/4.png"><a href="#">第四怪 四季服装同穿戴</a></div><div><img src="images/5.png"><a href="#">第五怪 火车没有汽车快</a></div><div><img src="images/6.png"><a href="#">第六怪 火车不通国内通国外</a></div><div><img src="images/7.png"><a href="#">第七怪 老奶爬山比猴快</a></div><div><img src="images/8.png"><a href="#">第八怪 鞋子后面多一块</a></div><div><img src="images/9.png"><a href="#">第九怪 脚趾四季露在外</a></div><div><img src="images/10.png"><a href="#">第十怪 鸡蛋拴着卖</a></div><div><img src="images/11.png"><a href="#">第十一怪 粑粑叫饵块</a></div><div><img src="images/12.png"><a href="#">第十二怪 花生蚕豆数着卖</a></div><div><img src="images/13.png"><a href="#">第十三怪 三个蚊子一盘菜</a></div><div><img src="images/14.png"><a href="#">第十四怪 四个老鼠一麻袋</a></div><div><img src="images/15.png"><a href="#">第十五怪 树上松毛扭着卖</a></div><div><img src="images/16.png"><a href="#">第十六怪 姑娘叫老太</a></div><div><img src="images/17.png"><a href="#">第十七怪 小和尚可以谈恋爱</a></div><div><img src="images/18.png"><a href="#">第十八怪 背着娃娃谈恋爱</a></div></div></body><!-- js --><!-- <script type="text/javascript" src="js/script.js"></script> --><!-- jquery --><script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript" src="jq/jq_script.js"></script>
</html>

css/style.css

/* All Tag */* {margin: 0;padding: 0;border: none;
}body {background: #ddd;
}img {border: none;
}a {text-decoration: none;color: #444;
}a:hover {color: #999;
}/* Wrap */
#wrap{position: relative;width: auto;height: auto;margin: 0 auto;
}#wrap > div{float: left;box-sizing: border-box;width: 280px;height: auto;margin: 10px;padding: 10px;border-radius: 5px;background: #fff;
}/* 除了第一行的div，其他的hover没有效果 */
/* #wrap > div:hover{opacity: 0.5
} */#wrap > div >img{width: 100%;
}#wrap > div > a{font-size: 18px;display: block;font-weight: bold;line-height: 40px;text-align: center;
}

js实现瀑布流

js/script.js

function waterfall(wrap,boxes){var windowWidth=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var windowHeight=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;var boxWidth = boxes[0].offsetWidth +20;var colsNumber = Math.floor(windowWidth / boxWidth);// console.log(colsNumber);// 设置容器的宽度wrap.style.width = boxWidth * colsNumber + 'px';// 定义一个数组并存储每一列的高度var everyHeight = new Array();for(var i=0;i<boxes.length;i++){if(i<colsNumber){everyHeight[i] = boxes[i].offsetHeight+20;}else{//找到当前数组最小的值，以及Indexvar minHeight =everyHeight[0];var minIndex = 0;for(var j=0;j<colsNumber;j++){if(everyHeight[j]<minHeight){minIndex = j;minHeight = everyHeight[j];}}//将新的Box添加到最短的那列var leftPosition = boxes[minIndex].offsetLeft-10;boxes[i].style.position = 'absolute';boxes[i].style.top = minHeight + 'px';boxes[i].style.left = leftPosition+'px';everyHeight[minIndex] += boxes[i].offsetHeight+20;}}
}window.onload = function() {var wrap = document.getElementById('wrap');var boxes = wrap.getElementsByTagName('div');waterfall(wrap, boxes);
}window.onresize = function(){var wrap = document.getElementById('wrap');var boxes = wrap.getElementsByTagName('div');waterfall(wrap, boxes);
}

jquery实现瀑布流

jq/jq_script.js

function waterfall(wrap,boxes){var windowWidth=$(window).width();var boxWidth = boxes.eq(0).outerWidth()+20;var colsNumber = Math.floor(windowWidth / boxWidth);console.log(colsNumber);// 设置容器的宽度wrap.width(boxWidth * colsNumber);// 定义一个数组并存储每一列的高度var everyHeight = new Array();for(var i=0;i<boxes.length;i++){if(i<colsNumber){everyHeight[i] = boxes.eq(i).outerHeight()+20;}else{//找到当前数组最小的值，以及Indexvar minHeight =everyHeight[0];var minIndex = 0;for(var j=0;j<colsNumber;j++){if(everyHeight[j]<minHeight){minIndex = j;minHeight = everyHeight[j];}}//将新的Box添加到最短的那列console.log(minIndex);boxes.eq(i).css({'position': 'absolute','top': minHeight,'left': boxes.eq(minIndex).position().left-10,'opacity': '0'}).stop().animate({'opacity': '1'}, 1000);everyHeight[minIndex] += boxes.eq(i).outerHeight()+20;}}
}$(document).ready(function event(){var wrap = $('#wrap');var boxes = wrap.children('div');//加载盒子waterfall(wrap, boxes);});

js和jquery对比代码

注释的是js的实现，注释下面对应的是jquery的实现

function waterfall(wrap,boxes){// var windowWidth=window.innerWidth//       || document.documentElement.clientWidth//       || document.body.clientWidth;var windowWidth=$(window).width();// var boxWidth = boxes[0].offsetWidth +20;var boxWidth = boxes.eq(0).outerWidth()+20;// console.log(boxWidth);var colsNumber = Math.floor(windowWidth / boxWidth);console.log(colsNumber);// 设置容器的宽度// wrap.style.width = boxWidth * colsNumber + 'px';wrap.width(boxWidth * colsNumber);// 定义一个数组并存储每一列的高度var everyHeight = new Array();for(var i=0;i<boxes.length;i++){if(i<colsNumber){// everyHeight[i] = boxes[i].offsetHeight+20;everyHeight[i] = boxes.eq(i).outerHeight()+20;}else{//找到当前数组最小的值，以及Indexvar minHeight =everyHeight[0];var minIndex = 0;for(var j=0;j<colsNumber;j++){if(everyHeight[j]<minHeight){minIndex = j;minHeight = everyHeight[j];}}//将新的Box添加到最短的那列// var leftPosition = boxes[minIndex].offsetLeft-10;// boxes[i].style.position = 'absolute';// boxes[i].style.top = minHeight + 'px';// boxes[i].style.left = leftPosition+'px';console.log(minIndex);boxes.eq(i).css({'position': 'absolute','top': minHeight,'left': boxes.eq(minIndex).position().left-10,'opacity': '0'}).stop().animate({'opacity': '1'}, 1000);// everyHeight[minIndex] += boxes[i].offsetHeight+20;everyHeight[minIndex] += boxes.eq(i).outerHeight()+20;}}
}
/*
window.onload = function() {var wrap = document.getElementById('wrap');var boxes = wrap.getElementsByTagName('div');waterfall(wrap, boxes);
}
*/
$(document).ready(function event(){var wrap = $('#wrap');var boxes = wrap.children('div');//加载盒子waterfall(wrap, boxes);});

jquery实现瀑布追加的效果

//模拟数据
var data = [{"src": "1.png","title": "第一怪 竹筒当烟袋"
}, {"src": "2.png","title": "第二怪 草帽当锅盖"
}, {"src": "3.png","title": "第三怪 这边下雨那边晒"
}, {"src": "4.png","title": "第四怪 四季服装同穿戴"
}, {"src": "5.png","title": "第五怪 火车没有汽车快"
}, {"src": "6.png","title": "第六怪 火车不通国内通国外"
}, {"src": "7.png","title": "第七怪 老奶爬山比猴快"
}, {"src": "8.png","title": "第八怪 鞋子后面多一块"
}, {"src": "9.png","title": "第九怪 脚趾四季露在外"
}, {"src": "10.png","title": "第十怪 鸡蛋拴着卖"
}, {"src": "11.png","title": "第十一怪 粑粑叫饵块"
}, {"src": "12.png","title": "第十二怪 花生蚕豆数着卖"
}, {"src": "13.png","title": "第十三怪 三个蚊子一盘菜"
}, {"src": "14.png","title": "第十四怪 四个老鼠一麻袋"
}, {"src": "15.png","title": "第十五怪 树上松毛扭着卖"
}, {"src": "16.png","title": "第十六怪 姑娘叫老太"
}, {"src": "17.png","title": "第十七怪 小和尚可以谈恋爱"
}, {"src": "18.png","title": "第十八怪 背着娃娃谈恋爱"
}];function waterfall(wrap,boxes){var windowWidth=$(window).width();var boxWidth = boxes.eq(0).outerWidth()+20;var colsNumber = Math.floor(windowWidth / boxWidth);// console.log(colsNumber);// 设置容器的宽度wrap.width(boxWidth * colsNumber);// 定义一个数组并存储每一列的高度var everyHeight = new Array();for(var i=0;i<boxes.length;i++){if(i<colsNumber){everyHeight[i] = boxes.eq(i).outerHeight()+20;}else{//找到当前数组最小的值，以及Indexvar minHeight =everyHeight[0];var minIndex = 0;for(var j=0;j<colsNumber;j++){if(everyHeight[j]<minHeight){minIndex = j;minHeight = everyHeight[j];}}//将新的Box添加到最短的那列// console.log(minIndex);//设置盒子样式setStyle(boxes.eq(i), minHeight, boxes.eq(minIndex).position().left, i);everyHeight[minIndex] += boxes.eq(i).outerHeight()+20;}//鼠标经过呈现半透明的交互效果boxes.eq(i).hover(function(event) {$(this).stop().animate({'opacity': '0.5'}, 500);}, function(event) {$(this).stop().animate({'opacity': '1'}, 500);})}
}//设置追加盒子样式
var getStartNumber = 0;
function setStyle(box, top, left, index){if (getStartNumber >= index) {return false;};box.css({'position': 'absolute','top': top,'left': left,'opacity': '0'}).stop().animate({'opacity': '1'}, 1000);getStartNumber = index;
}//判断是否scroll到底部
function scrollBottom(wrap){// 最后一个盒子的高度+其所在列的高度 <= 文档的高度+scrollTop 就判断到底部var documentHeight = $(window).height();var scrollHeight = $(window).scrollTop();var boxes = wrap.children('div');var lastBoxTop = boxes.eq(boxes.length-1).offset().top;var lastHeight = boxes.eq(boxes.length - 1).outerHeight();var lastColHeight = lastBoxTop + lastHeight;console.log(lastColHeight);console.log(documentHeight + scrollHeight);return documentHeight + scrollHeight >= lastColHeight ? true : false;
}//追加盒子函数
function appendBox(wrap){if(scrollBottom(wrap)){for(var i in data){var innerString = '<div><img src="images/' + data[i].src + '"><a href="#">' + data[i].title + '</a></div>';wrap.append(innerString);}}else{return false;}// 实现瀑布流效果waterfall(wrap, wrap.children('div'));
}$(document).ready(function event(){var wrap = $('#wrap');var boxes = wrap.children('div');//加载盒子waterfall(wrap, boxes);$(this).scroll(function(event){appendBox(wrap);})
});