前端之家收集整理的这篇文章主要介绍了
深入探秘jquery瀑布流的实现，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
瀑布流也应该算是流行几年了吧。首先是由Pinterest掀起的浪潮，然后国内设计如雨后春笋般，冒出很多瀑布流的例子，比如，蘑菇街，Mark之(不过最近涉黄，好像被喝茶了),还有淘宝的 “哇哦”. 这些都是很棒的例子， 今天我想重新谈起瀑布流，一是想满足我自己的愿望，写一个详细的介绍(不敢自名为教程),二是，给大家一份参考，因为search很多，但是他们给的是一个插件，然后教你怎样配置，当然，也有很多其他的大神也细心的做了很多教程，比如 imooc上面 Amy 姐姐 发布的瀑布流教程，也是很棒的。 而我的目的就是，尽量把一些常见的demo给大家讲解一遍，以及，融合以前学过的设计模式，相当于一个简单的demo.
绝对式布局
不多说，先看一个demo
js
页面最多可以放多少列
var bodyW = document.body.clientWidth,pinW = $(".pin")[0].offsetWidth;
return Math.floor(bodyW / pinW);
}
var getIndex = function(arr) { //获得最小高度的index
var minHeight = Math.min.apply(null,arr); //获得最小高度
for (var i in arr) {
if (arr[i] === minHeight) {
return i;
}
}
}
//根据列数确定第一排img的高度并放入数组当中。
var setWidth = function() { //通过列数设置宽度
var col = columns(),//获得最后一列
main = $('#main')[0]; //获得罩层
main.style.width = col * $('.pin')[0].offsetWidth + "px";
}
var overLoad = function(ele) {
var index = getIndex(arrHeight),minHeight = Math.min.apply(null,arrHeight),//
获取最小高度
pins = $('.pin'),style = ele.style;
style.position = "absolute";
style.top = minHeight + "px"; //设置当前元素的高度
style.left = pins[index].offsetLeft + "px";
arrHeight[index] += ele.offsetHeight;
}
var init = function() {
var pins = $(".pin"),col = columns();
setWidth(); //设置包裹容器的宽度
for (var i = 0,pin; pin = pins[i]; i++) {
if (i < col) { //存储第一排的高度
arrHeight.push(pin.offsetHeight);
} else {
overLoad(pin); //将元素的位置重排
}
}
}
window.onload = init;
//...执行
自动更新操作。
//
添加当，滚动到一定位置的时候，
添加html节点.
//得到最低高度和序号,获得临界位置
//模仿加载数据
var dataInt = [{
'src': '1.jpg'
},{
'src': '2.jpg'
},{
'src': '3.jpg'
},{
'src': '4.jpg'
},{
'src': '1.jpg'
},{
'src': '4.jpg'
}];
function isLoad() { //是否可以进行加载
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,point = scrollTop + wholeHeight; //页面底部距离header的距离
var arr = $('.pin');
var lastHei = arr[arr.length - 1].getBoundingClientRect().top;
return (lastHei < point) ? true : false;
}
var dealScroll = (function() {
var main = $('#main')[0],flag = true;
return function() {
console.log("trigger");
if (isLoad() && flag) {
for (var i = 0,data; data = dataInt[i++];) {
var div = document.createElement('div');
div.innerHTML = temp(data.src);
div.className = "pin";
main.appendChild(div);
overLoad(div); //和上面的overload有耦合性质
}
flag = false;
setTimeout(function() { //控制滑行手速，时间越长对速度的滑动时间影响越大。
flag = true;
},1000);
}
}
})();
window.addEventListener('scroll',function() {
dealScroll();
},false);
function temp(src) {
return `
<div class="Box">
<img src="http://cued.xunlei.com/demos/publ/img/P_00${src}"/>
`;
}
})();
Box{
padding: 10px;
border:1px solid #ccc;
Box-shadow: 0 0 6px #ccc;
border-radius: 5px;
}
.
Box img{
width:162px;
height:auto;
}
