通过本文主要向大家介绍了jquery瀑布流等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
瀑布流也应该算是流行几年了吧。首先是由Pinterest掀起的浪潮，然后国内设计如雨后春笋般，冒出很多瀑布流的例子，比如，蘑菇街，Mark之(不过最近涉黄，好像被喝茶了),还有淘宝的 “哇哦”. 这些都是很棒的例子， 今天我想重新谈起瀑布流，一是想满足我自己的愿望，写一个详细的介绍(不敢自名为教程),二是，给大家一份参考，因为search很多，但是他们给的是一个插件，然后教你怎样配置，当然，也有很多其他的大神也细心的做了很多教程，比如 imooc上面 Amy 姐姐 发布的瀑布流教程，也是很棒的。 而我的目的就是，尽量把一些常见的demo给大家讲解一遍，以及，融合以前学过的设计模式，相当于一个简单的demo.
绝对式布局
不多说，先看一个demo
js
var cal = (function() {
"use strict";
var $ = function() {
return document.querySelectorAll.apply(document, arguments);
}
var arrHeight = []; //得到分列的高度
var columns = function() { //计算页面最多可以放多少列
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': '2.jpg'
}, {
'src': '3.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}"/>
</div>
`;
}
})();
CSS
$font:10px/1.5 sans-serif,"Microsoft YaHei","Arial";
html{
height: 100%;
width: 100%;
font:$font;
}
#main{
position: relative;
&::after{
display:block;
content:'';
clear:both;
}
}
.pin{
padding: 15px 0 0 15px;
float:left;
}
.box{
padding: 10px;
border:1px solid #ccc;
box-shadow: 0 0 6px #ccc;
border-radius: 5px;
}
.box img{
width:162px;
height:auto;
}
HTML
<div id="main">
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_001.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_002.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_003.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_004.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_005.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_006.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_007.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_008.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_009.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_010.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_011.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_012.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_013.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_014.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_015.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_016.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_017.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_018.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_019.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://cued.xunlei.com/demos/publ/img/P_020.