在淘宝等各大的网站我们不难发现.图片的加载都占用整个网页;接下来我们就来实现它, 1 ,css 布局部分 1:给外面做个大的mai_box(给它设置margin:0 auto)放全部的box.给box设置padding:10px 0 0 10px. box里面嵌套一个div.这个div就设边框,再给它padding:10px; 它的里面就是img了; 这布局其实是再简单不过了.但是我们不是有多少图片都全部放在HTML中.我们就是布局一部分,好让我们的思路清晰明了.其实,在瀑布流中图片的加载都是从网络上获取,所以我们就必须动态的创建图片(javascript 来实现) 这里我们就用到前天我们用到的underscore-min.js 框架了 _min 列如 var numbers = [10, 5, 100, 2, 1000];
_.min(numbers);
=> 2
js步骤 : 创建一个假的数组,(当然了,里面可都是货真价值的好东西,他们才是我们工作前的第一要素.) 数组里面放着图片的 src ,(列如 [({src:'21.jpg'},{src:'11.jpg'},{src:'1.jpg'},{src:'12.jpg'})] 他是我们创建图片并加载图片的前提条件 ; 有了这个数组以后,我们就考虑当屏幕被点击滚动触发的时候所发生的事件;滚动吧,就用到定时器了.
一 实现 box_main 居中
二 让第一排不定位 其他都定位
三 判断是不是第一排
求出盒子对应的索引
/**
- Created by xmg on 2017/5/31.
*/
/***
- 1.让父盒子水平居中显示(#main)
- 1.1.设置盒子的width
- 1.2.设置盒子的margin(0 auto)
- 2.除了第一行的盒子不需要做定位,其余行的盒子都需要做定位
- 3.判断什么时候加载后续的其他盒子
- 4.当满足第三部的加载其他盒子的条件的时候,如果加载出新数据(造数据)
- **/
function $(tagId) {
return document.getElementById(tagId);
}
window.onload = function () {
//1.让父盒子居中显示
waterFlow('main','box')
}
//瀑布流布局
function waterFlow(parent,box) {
//1.获取所有的盒子
var allBox = $(parent).getElementsByClassName(box);
//2.求出任意一个盒子的宽度
var boxWidth = allBox[0].offsetWidth;
//3.求出当前屏幕的宽度
var clientW = document.body.clientWidth||document.documentElement.clientWidth;
//4.求出每一行显示的盒子
var cols = Math.floor(clientW/boxWidth);
//
// alert(cols);
//5.让父盒子进行居中显示
$(parent).style.width = cols * boxWidth +'px';
$(parent).style.margin = '0 auto';
//2.除了第一行的盒子不需要做定位,其余行的盒子都需要做定位
var heightArr =[];
//遍历所有的子盒子
for(var i=0;i<allBox.length;i++)
{
//1.求出每一个盒子的高度
var boxHeight = allBox[i].offsetHeight;
//是否是第一行
//
// //第一行
if(i<cols)
{
heightArr.push(boxHeight);
}
// //不是第一行
else
{
//2.取出数组中第一行高度最矮的盒子
var minBoxHeight = _.min(heightArr);
//3.求出数组中高度最矮盒子对应的索引
var minBoxHeightIndex = getBoxHeightIndex(heightArr,minBoxHeight);
//4.定位其他行的所有盒子
allBox[i].style.position = 'absolute';
allBox[i].style.left = minBoxHeightIndex*boxWidth+'px';
allBox[i].style.top = minBoxHeight+'px';
}
//更新高度数组中最矮盒子的索引位置
heightArr[minBoxHeightIndex]+=boxHeight;
}
// console.log(heightArr,minBoxHeight,minBoxHeightIndex);
}
/***
- 求出最矮盒子在高度数组对应的索引位置
*/
function getBoxHeightIndex(arr,value) {
for(var i=0;i<arr.length;i++)
{
//判断
if(arr[i]==value) return i;
}
}
