微信图片_20190117101857.png
直接上代码了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
/*将主容器的布局方式设置为相对布局*/
#contianer{
position: relative;
}
.box{
padding: 5px;
float: left;
}
/*将承载图片的容器定制颜色及边框大小和圆角*/
.boximg{
padding: 5px;
box-shadow: 0 0 5px #ccc;
border: 1px solid #cccccc;
border-radius: 5px;
}
/*定制图片尺寸*/
.boximg img{
width: 250px;
height: auto;
}</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="boximg">
<img src="./bb.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="./11a.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="./bb.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="./11a.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="./bb.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="./11a.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="./bb.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="./11a.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="./bb.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="./11a.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="./bb.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="./11a.jpg">
</div>
</div>
</div>
<script>
window.onload = function(){
waterFlow("container", "box");
var dataInt = {
'data': [{
'src': './11a.jpg'
}, {
'src': './11a.jpg'
}, {
'src': './11a.jpg'
}, {
'src': './11a.jpg'
}, {
'src': './11a.jpg'
}, {
'src': './11a.jpg'
}, ]
};
window.onscroll = function () {//模拟无限加载
if (checkscrollside()) {
var oParent = document.getElementById('container'); // 父级对象
for (var i = 0; i < dataInt.data.length; i++) {
var oPin = document.createElement('div'); //添加 元素节点
oPin.className = 'box'; //添加 类名 name属性
oParent.appendChild(oPin); //添加 子节点
var oBox = document.createElement('div');
oBox.className = 'boximg';
oPin.appendChild(oBox);
var oImg = document.createElement('img');
oImg.src = dataInt.data[i].src;
oBox.appendChild(oImg);
}
waterFlow('container', 'box');
};
}
}
window.onresize = function(){//视窗变化也触发
waterFlow("container", "box");
}
function waterFlow(parent, chirld){
var wparent = document.getElementById(parent);//获取父级div, 最外级容器
var allArr = getAllChirld(wparent,chirld);//获取到所有的class为box的容器div
var wscreenWidth = document.documentElement.clientWidth;//获取屏幕宽度
var wchirldWidth = wparent.getElementsByTagName("*");//获取wparent下所有的标签
var num = Math.floor(wscreenWidth/wchirldWidth[0].offsetWidth);//屏幕宽度/单个box的宽度,计算出一行多少个
console.log(num)
// 从而可以知道每行最多容纳几张图片
wparent.style.cssText = 'width:'+wchirldWidth[0].offsetWidth*num+'px;margin:0 auto';//保证parent容器的宽度不多余,并且水平居中
//获得每行的最小高度
getMinHeightOfCols(allArr, num);
}
function getAllChirld(parent,classname){//获取所有的child
//获取所有的标签
var wchirld = parent.getElementsByTagName("*");
// console.log(wchirld)
//创建数组
var chirldArr = [];
//遍历wchirld, 将其中className等于classname(传进来的参数)相同的标签放入数组chirldArr中
for(var i = 0; i<wchirld.length; i++){
if(wchirld[i].className==classname){
//每放进去一个, 都是在数组的最后一个
chirldArr.push(wchirld[i]);
}
}
//返回该数组
return chirldArr;
}
function getMinHeightOfCols(chirdArr, num){
//创建数组, 用来盛放每一行的高度
var onlyOneColsArr = [];
for(var i = 0; i<chirdArr.length; i++){
chirdArr[i].style.position = 'static';//为了resize时清空absolute的状态
if(i<num){//第一排正常摆放
//num为传进来的参数, 即为每行放图片的张数, 此步骤的目的是为了将第一行每张图片的高度遍历出来存放如新数组
onlyOneColsArr[i]=chirdArr[i].offsetHeight;
} else {//第二排开始absolute摆放
//当大于每行存放的图片个数时进入该方法, Math.min.apply这个方法是为了得到数组中的最小值
var minHeightOfCols = Math.min.apply(null, onlyOneColsArr);
//此方法的目的是为了得到最小高度图片的下表, 也就是在每行的第几张, 具体方法见下面
var minHeightOfindex = getminIndex(onlyOneColsArr, minHeightOfCols);
//定义布局方式为绝对布局
chirdArr[i].style.position = "absolute";
//得到下一行图片应放的高度
chirdArr[i].style.top = minHeightOfCols + "px";
//得到下一行图片应放于那个位置
chirdArr[i].style.left = chirdArr[minHeightOfindex].offsetLeft + "px";
//将两张图片高度相加得到一个新的高度用来进行下一次的计算
onlyOneColsArr[minHeightOfindex] += chirdArr[i].offsetHeight;
}
}
}
//此方法是为了进行最小高度下标的确定
function getminIndex(onlyOneColsArr, min){
//遍历传进来的高度数组
for(var i in onlyOneColsArr){
//如果高度等于最小高度, 返回i即为该图片下标
if(onlyOneColsArr[i] == min){
return i;
}
}
//检查是否到底部
function checkscrollside(){
if(getScrollTop()+getClientHeight()==getScrollHeight()){
return true;
}else{
return false
}
//滚动条滚动距离
function getScrollTop(){
return document.documentElement.scrollTop+document.body.scrollTop;
}
//可视窗高度
function getClientHeight(){
return document.documentElement.clientHeight;
//如果考虑兼容性问题,可以用下面完整判断
// var clientHeight = 0;
// if (document.body.clientHeight && document.documentElement.clientHeight) {
// var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body
// .clientHeight : document.documentElement.clientHeight;
// } else {
// var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body
// .clientHeight : document.documentElement.clientHeight;
// }
// return clientHeight;
}
//补充知识:
//document.documentElement.clientHeight -> 视口的大小
//document.documentElement.scrollHeight -> 文档的大小
//document.documentElement.offsetHeight -> 文档的大小,会因为用了脱离文档的absolute导致高度不一致
//document.body.clientHeight
//document.body.scrollHeight -> 这三个都会返回文档的大小
//document.body.offsetHeight 会因为用了脱离文档的absolute导致高度不一致
//文档实际高度
function getScrollHeight()
{
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
}</script>
</body>
</html>
