android瀑布流响应式布局,瀑布流预加载和响应式布局

图片版瀑布流

.box{

width: 850px;

border: 1px purple solid;

position: relative;

margin:0 auto;

min-width: 220px;

}

.box img{

width: 200px;

position: absolute;

transition:0.5s;

}

var progress = document.getElementById("progress");

var box = document.getElementsByClassName('box')[0];

var heightArr = [];

var count = 0;

var arr = ["wk1.png", "bg.png", "cold.png", "wm.png"]

var imgArr = [];

for(var j = 0; j < 16; j++){

var readyImg = new Image();

imgArr.push(readyImg);

readyImg.src = "imgs/P_0" + j + ".jpg";

readyImg.onload = function(){

count++;

progress.value = (count / 16) * 100;

if(count == 16){

start();

// 把改变窗口方法放在预加载里，否则当图片加载时拖动窗口图片会一张一张显示

re();

}

}

}

// 加一个开关让过渡有效果,否则再次调用start方法时，会把img再次插入，transtion不会有用

var isFirst = true;

function start(){

// ****************************************

// onresize里面的方法放上来为了让刷新页面的时候也会发生变化

var l = parseInt((window.innerWidth - 16)/200);

// 当窗口移动的范围很小时，还是当前列数时，不用重新布局，直接return

// 当l为0时heightArr.length为0，刷新页面下面不会执行，所以会堆叠在一起

if(heightArr.length ==l && l !=0){

return;

}

console.log("重新布局");

//如果窗口列数不足一列，也要保证heightArr.length的长度为1

//当l为0时，heightArr.length为1；(至少放一列)

heightArr.length = l == 0 ? 1 : l;

box.style.width = 210 * l + "px";

for(var i=0; i

heightArr[i] = 0;

}

// **********************************************

// 比较每列数组的长度，将生成的图片插入长度最小的数组

for(var i = 0; i < 16; i++){

var img = imgArr[i]

var minIndex = 0;

for(var j = 1; j < heightArr.length; j++){

if (heightArr[minIndex] > heightArr[j]) {

minIndex = j;

}

}

img.style.left = minIndex * 210 + "px";

img.style.top = heightArr[minIndex] + "px";

if(isFirst){

box.appendChild(img);

}

heightArr[minIndex] += (img.offsetHeight + 10);

}

isFirst = false;

}

// 改变窗口大小，让整个box的宽度

function re(){

window.onresize = function(){

start();

}

}