-
圖片排序： for(var i=0; i<oBoxs.length; i++){ if(i<cols){ 1、獲取第一列各數(shù)據(jù)塊至頁面頂部的距離： hArr.push(oBoxs[i].offsetHeight); } else{ 2、取出各offsetHeight中的最小值： var minH = Math.min.apply(null, hArr); 3、設(shè)置第第一列以外的數(shù)據(jù)塊的left值： var idx = getMinHIndex(hArr, minH); oBoxs[i].style.position = "absolute"; oBoxs[i].style.top = minH + "px"; // oBoxs[i].style.left = w * idx + "px"; oBoxs[i].style.left = oBoxs[idx].offsetLeft + "px"; 4、重置各offsetHeight中的最小值 hArr[idx] += oBoxs[i].offsetHeight; } }查看全部
-
布局講的不錯(cuò)查看全部
-
A2:function checkscrollside(){ // 檢測(cè)是否具備了加載數(shù)據(jù)塊的條件 } function animateWater(_pin,_i,_pw){ var _t = getMin(_al); _pin.eq(_i).animate({ left:_t*_pw, 'margin':0, top:_al[_t] },300,function(){ _al[_t]+=_pin.eq(_i).outerHeight(); _i++; animateWater(_pin,_i,_pw); }) } function getMin(_al){ var _minT = Math.min.apply(null,_al); for(var i in _al){ if(_al[i]==_minT){ return i; } } }查看全部
-
<script>A1 $( window ).on( "load", function(){ waterfall(); // 調(diào)用waterfall函數(shù) var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]}; window.onscroll=function(){ // 拖動(dòng)滾動(dòng)條時(shí) } }); var _al = []; function waterfall(){ // 計(jì)算及定位數(shù)據(jù)塊顯示分散效果 var _pin = $("#main").find(".pin"); var _pw = _pin.eq(0).outerWidth(); var _wh = $(window).height()/2; var _ww = $(window).width(); var _co = Math.floor(_ww/_pw); var _pi = _pin.length; // 初始化數(shù)組 for(var i in _pin){ if(i<_co){ _al.push(0); } _pin.eq(i).css({ top:_wh, left:'50%', 'margin-top':-(_pin.height()/2)+((Math.floor(Math.random()*10)<5?-1:1)*Math.floor(Math.random()*200)), 'margin-left':-(_pin.width()/2)+((Math.floor(Math.random()*10)<5?-1:1)*Math.floor(Math.random()*200)) }); } animateWater(_pin,0,_pw); }查看全部
-
hArr[index]+=oBoxs[i].offsetHeight就是hArr[index]=hArr[index]+oBoxs[i].offsetHeight的意思！ 另外這是個(gè)大循環(huán) for (var i=0;i<oBoxs.length;i++) 遍歷每一張圖 視頻中cols=6(所以hArr數(shù)組的長(zhǎng)度為6)，當(dāng)i=5時(shí)，hArr數(shù)組保存了6張圖的高（分別是266，286，160，146，155，147），當(dāng)i=6時(shí)（這是進(jìn)行第7次循環(huán)）執(zhí)行else后面的代碼，取出hArr中最小的值minH=146和索引index=3；然后把圖片放在第4張圖下面； 如果沒有hArr[index]+=oBoxs[i].offsetHeight; 進(jìn)行 i =7（第8次循環(huán)），獲得的minH和index和之前是一樣的，一直到i=oBoxs.length-1;結(jié)束循環(huán) 所有圖片會(huì)放在同一位置！ 實(shí)際在進(jìn)行i=7時(shí)，第四張圖下面已經(jīng)有一張圖了，必然hArr[3]的高度不再是146，而是146加上上一張圖的高度 也就是hArr[3]=hArr[3]+oBoxs[6].offsetHeight; ps：數(shù)組下標(biāo)是從0開始的。查看全部
-
答1；16-17行把前6個(gè)的高度放入oBoxs【】；然后19行獲得高度最小的那一個(gè)，20行利用getMinhIndex()得到高度最低那個(gè)的索引，最后利用絕對(duì)定位21-24行固定下一張的位置； 答2：這個(gè)時(shí)候我們看見第7張后面所有的圖片都重合了，因?yàn)閛Box數(shù)組的值沒有改變，導(dǎo)致下一次循環(huán)第19行獲得的最小高度是相同的，因此我們每排列一張圖片就要把它的高度加在對(duì)應(yīng)的數(shù)組下面參見第25行！ 具體過程： var hArr=[]; //循環(huán)遍歷每一張圖片 for (var i=0;i<oBoxs.length;i++) { //下雨cols的圖片正常擺放并將高度放如hArr; if(i<cols){ hArr.push(oBoxs[i].offsetHeight); }else{ //取出hArr中高度最小的的值，并用minH保存 var minH=Math.min.apply(null,hArr); //console.log(minH); //取出高度最小的值在數(shù)組hArr中的索引 var index=getMinhIndex(hArr,minH); //固定下一張圖的位置 oBoxs[i].style.position='absolute'; oBoxs[i].style.top=minH+'px'; console.log(oBoxW); oBoxs[i].style.left=oBoxW*index+'px'; //將添加的圖片的值加如對(duì)應(yīng)的hArr數(shù)組中；hArr[index]表示數(shù)組中最小的那個(gè)，oBoxs[i]代表即將剛放入的圖片 hArr[index]+=oBoxs[i].offsetHeight; } } }查看全部
-
js思路查看全部
-
如何將塊框 oBoxs[0] 元素動(dòng)態(tài)設(shè)置為絕對(duì)定位？position ： div.style.樣式屬性名稱 = '屬性值' 如何求數(shù)組 pinHArr 的最小值:Math.min.apply(null,pinHArr) 如何求 oBoxs[0] 元素距離父元素的左側(cè)偏移？oBoxs[0].offsetLeft查看全部
-
202列寬算了padding ： http://pan.baidu.com/s/1jGE77O6查看全部
-
columns:綜合屬性查看全部
-
多欄布局查看全部
-
少寫了括號(hào)outerHeight(); DD.ico 大小寫錯(cuò)查看全部
-
jquery 5:查看全部
-
jquery4:查看全部
-
jquery3:查看全部
舉報(bào)
0/150
提交
取消