//獲取上一行最短圖片的位置
function getminHIndex(arr,minH){
for(var i in arr){
if(arr[i]==minH){
return i;
}
}
}
function getminHIndex(arr,minH){
for(var i in arr){
if(arr[i]==minH){
return i;
}
}
}
2016-02-17
var minH=Math.min.apply(null,boxH);
var minHIndex=getminHIndex(boxH,minH);
boxs[i].style.position = "absolute";
boxs[i].style.top = (minH+marginLeft)+"px";
boxs[i].style.left=(boxs[minHIndex].offsetLeft-marginLeft)+'px';
boxH[minHIndex]+=boxs[i].offsetHeight+marginLeft;//更新添加了塊框后的列高
}}}
var minHIndex=getminHIndex(boxH,minH);
boxs[i].style.position = "absolute";
boxs[i].style.top = (minH+marginLeft)+"px";
boxs[i].style.left=(boxs[minHIndex].offsetLeft-marginLeft)+'px';
boxH[minHIndex]+=boxs[i].offsetHeight+marginLeft;//更新添加了塊框后的列高
}}}
2016-02-17
var row_num = Math.floor(document.documentElement.clientWidth/boxW);
parent.style.cssText="width:"+boxW*row_num+"px;margin:0 auto;";
var boxH = new Array;
for(var i=0;i<boxs.length;i++){
if(i<row_num){
boxH.push(boxs[i].offsetHeight);//第一行不用考慮排列，先獲取值
console.log(boxH[i]);
}else{
parent.style.cssText="width:"+boxW*row_num+"px;margin:0 auto;";
var boxH = new Array;
for(var i=0;i<boxs.length;i++){
if(i<row_num){
boxH.push(boxs[i].offsetHeight);//第一行不用考慮排列，先獲取值
console.log(boxH[i]);
}else{
2016-02-17
function rank(parent,cls){
var parent =document.getElementById(parent);
var boxs = parent.getElementsByClassName("box");
var marginLeft = parseInt(getStyle(boxs[0],"marginLeft"))
var boxW = boxs[0].offsetWidth + marginLeft*2;
var parent =document.getElementById(parent);
var boxs = parent.getElementsByClassName("box");
var marginLeft = parseInt(getStyle(boxs[0],"marginLeft"))
var boxW = boxs[0].offsetWidth + marginLeft*2;
2016-02-17
for(var i=0;i<dataInt.data.length;i++){ var box=document.createElement('div');
box.className='box'; main.appendChild(box); var img=document.createElement('img');
img.src='./images/'+dataInt.data[i].src; box.appendChild(img);
} rank('main','box'); }; }}
box.className='box'; main.appendChild(box); var img=document.createElement('img');
img.src='./images/'+dataInt.data[i].src; box.appendChild(img);
} rank('main','box'); }; }}
2016-02-17
window.onload=function(){
rank('main','box');
var dataInt={'data':[{'src':'45.jpg'},{'src':'46.jpg'},{'src':'47.jpg'},{'src':'48.jpg'}]};
window.onscroll=function (){
if(checkscrollside()){
var main = document.getElementById('main');
rank('main','box');
var dataInt={'data':[{'src':'45.jpg'},{'src':'46.jpg'},{'src':'47.jpg'},{'src':'48.jpg'}]};
window.onscroll=function (){
if(checkscrollside()){
var main = document.getElementById('main');
2016-02-17
<style>
*{ margin:0;
padding:0;}
#main{ position: relative;}
#main .box{
margin:8px;
float:left;
border:1px solid #ccc;
box-shadow: 0 0 8px #ccc;
border-radius: 5px;
}
#main .box img{
margin:12px;
width:162px;
height:auto;
}
</style>
*{ margin:0;
padding:0;}
#main{ position: relative;}
#main .box{
margin:8px;
float:left;
border:1px solid #ccc;
box-shadow: 0 0 8px #ccc;
border-radius: 5px;
}
#main .box img{
margin:12px;
width:162px;
height:auto;
}
</style>
2016-02-17
<div id="main">
<div class="box"> <img src="images/0.jpg"/> </div>
<div class="box"> <img src="images/1.jpg"/> </div>
<div class="box"> <img src="images/2.jpg"/> </div>
<div class="box"> <img src="images/3.jpg"/> </div>
<div class="box"> <img src="images/4.jpg"/> </div>
</div>
<div class="box"> <img src="images/0.jpg"/> </div>
<div class="box"> <img src="images/1.jpg"/> </div>
<div class="box"> <img src="images/2.jpg"/> </div>
<div class="box"> <img src="images/3.jpg"/> </div>
<div class="box"> <img src="images/4.jpg"/> </div>
</div>
2016-02-17
補(bǔ)充：
$(window).on("resize", waterfall);
if(index < cols) {
$(value).removeAttr("style"); //移除style樣式，配合 resize 事件（窗口變化時(shí)觸發(fā)）
hArr[index] = h;
} else {
$(window).on("resize", waterfall);
if(index < cols) {
$(value).removeAttr("style"); //移除style樣式，配合 resize 事件（窗口變化時(shí)觸發(fā)）
hArr[index] = h;
} else {
2016-02-04
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
2016-02-03
老師講的很好，也很詳細(xì)，要是寫(xiě)js的時(shí)候注意一下代碼的執(zhí)行效率就更好了
2016-02-03