瀑布流布局
2017-05-14 本文已影响0人
这很重要吗
特点：利用
绝对定位固定图片位置，图片等宽不等高，参差不齐，滚动滚轮能自动加载。
结构
图片之间的距离用padding实现，而不是margin
等宽不等高
Paste_Image.png
Paste_Image.png
效果：
offsetWidth属性获取元素的宽度
Paste_Image.png
获取页面的宽度
Paste_Image.png
Math.floor取整
Paste_Image.png
cssText的方式设置样式
Paste_Image.png
第二行的第一张图片加在第一行高度最小的图片之后，即top值等于最小高度
Paste_Image.png
Math.min.apply(null,harr);//求数组最小值
核心代码
Paste_Image.png
布局效果完成
加载数据块的条件
加载
混杂模式和标准模式，混杂模式下，使用document.body，标准模式下，使用document.documentElement
Paste_Image.png
获取所有元素
s = oP.getElementsByTagName('*');
<!Doctype>
<html>
<head>
<meta charset="utf-8" />
<title>瀑布流布局</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#main {
width: 1185px;
margin: 0px auto;
position: relative;
}
.box {
padding-left: 15px;
padding-top: 15px;
float: left;
}
.pic {
padding: 10px;
border: 1px solid #CCCCCC;
border-radius: 5px;
box-shadow: 0 0 5px #CCCCCC;
}
.pic img {
width: 200px;
height: auto;
}
</style>
<script type="text/javascript">
window.onload = function() {
setBoxPosition();
window.onscroll = function() {
if(checkScrollSlide()) {
var main = document.getElementById("main");
var imgUrl = "http://coding.imooc.com/static/module/index/img/banner02.jpg";
//模拟动态添加10个box数据
for(var i = 0; i < 10; i++) {
var box = getBoxDiv(imgUrl);
main.appendChild(box);
}
setBoxPosition();
}
}
/**
* 设置Box所在位置，实现瀑布流效果
*/
function setBoxPosition() {
//将main下所有class为box的元素取出来
var boxs = document.getElementById("main").getElementsByClassName("box");
//将box按照高度进行排列
var boxsPos = new Array(); //box底部相对页面位置
for(var i = 0; i < boxs.length; i++) {
if(i < 5) { //由于在CSS中固定了main的宽度，所以每列只能显示五行
boxsPos.push(boxs[i].offsetHeight);
} else {
var minH = Math.min.apply(null, boxsPos);
var index = getMinHIndex(boxsPos, minH);
//设置box的绝对定位
boxs[i].style.position = "absolute";
boxs[i].style.top = minH + "px";
boxs[i].style.left = index * boxs[i].offsetWidth + "px";
//更新boxsPos位置信息
boxsPos[index] += boxs[i].offsetHeight;
}
}
}
/**
* 取出boxsPos中最小值的索引
*/
function getMinHIndex(arr, val) {
for(var i = 0; i < arr.length; i++) {
if(arr[i] == val) {
return i;
}
}
}
/**
* 检测是否具备了滚动加载数据的条件
*/
function checkScrollSlide() {
var main = document.getElementById("main");
var boxs = main.getElementsByClassName("box");
var lastBoxHeight = boxs[boxs.length - 1].offsetTop
//+ Math.floor(boxs[boxs.length - 1].offsetHeight / 2);
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
return(scrollTop + screenHeight > lastBoxHeight) ? true : false;
}
/**
* 创建Box节点
*/
function getBoxDiv(src) {
var box = document.createElement("div");
var pic = document.createElement("div");
var img = document.createElement("img");
box.className = "box";
pic.className = "pic";
img.src = src;
box.appendChild(pic);
pic.appendChild(img);
return box;
}
}
</script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
<div class="box">
<div class="pic">
</div>
</div>
</div>
</body>
</html>
jq实现##
获取宽度， obj.width(内容宽度)和obj.outerWidth()（包括padding和border）
Paste_Image.png
设置宽度，不需要加单位
Paste_Image.png
jq中用each（index，value）遍历所有的boxs，其中value是dom对象，需要转换为jq对象，$(value)
Paste_Image.png
Paste_Image.png
eq（index）方法
Paste_Image.png
$.inArray（值，所在数组）方法判断一个值在数组中出现的索引
jq实现瀑布流布局部分代码###
Paste_Image.png
Paste_Image.png
onscroll事件事件瀑布流加载###
$('#main>div').last();去最后的一个div
Paste_Image.png
jq：$lastBox.offset().top先调用offset()方法，再取属性值
js：lastBox.offsetTop属性
Paste_Image.png
此时的value也是js原生的对象
Jquery对象本质是一个“类数组”
Paste_Image.png
Paste_Image.png
通过
$(value).attr('src');取值
Paste_Image.png
jq 实现加载的代码###
Paste_Image.png
Paste_Image.png
css3多栏布局##
多栏布局，利用columns属性：多栏布局column-width可以设置每一列的宽度，并根据窗口宽度除以每一列宽度得到的列数进行纵向排列div模块，实现瀑布流布局
知识点：
-
column的浏览器兼容问题，不同内核要写其前缀
-webkit Google浏览器内核
-ms IE
-o 欧朋opera
-moz 火狐FireFox -
column-width 和column-count没有必要同时出现
-
column-rule设置列与列之间的边框
column-gap 设置列间距，不一定定义多少，实际就显示多少。其计算规则：用当前浏览器宽口宽除以定义的列宽，剩下的距离平均分配
设置了column-width属性的值
Paste_Image.png
效果
随着窗口的大小变化，列数也会跟着改变
Paste_Image.png
column-rule设置边框属性
column-gap设置内间距
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
var $div = $('div') //jQuery对象
var div = $div.get(0) ;//通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
总结##
比较
js方式：
Paste_Image.png
css3方式：
Paste_Image.png
扩展##
使用jQuery实现加载图片带有分散效果的瀑布流布局
Paste_Image.png
任务
一、定义图片布局函数waterfall
二、在waterfall函数中定义根据class获取元素函数getByClass
三、计算整个父盒子的宽度且让它在浏览器中水平居中
四、计算及排列每个数据块应该出现的位置，一开始数据块紧跟在第二张图片的后边且位于最高的那个图片的下边，然后通过动画分散到它该出现的位置
五、拖动滚动条时定义检测是否具备了滚条加载数据块条件的函数。
六、遍历给出的数据，将图片添加到数据块中渲染出来
