-
原理：通過計算和絕對定位的方式固定圖片位置。 特點：等寬不等高/參差不齊。 使用padding而不是margin：獲取數(shù)據(jù)塊高度，不僅數(shù)據(jù)塊本身高度，還包括數(shù)據(jù)塊間的距離；offsetHeight可以獲取padding，但不能獲取margin。查看全部
-
獲取父元素下指定類名元素。 1、創(chuàng)建數(shù)組 2、獲取父元素下所有標(biāo)簽 3、遍歷所有標(biāo)簽，若類名恰好與要查找的類名，則加入數(shù)組查看全部
-
三種方法實現(xiàn)瀑布流布局查看全部
-
JQ方案完整版：查看全部
-
CSS3方式的優(yōu)缺點： 1、瀏覽器自動計算列數(shù)，只要設(shè)置列寬； 2、列寬隨窗口大小而改變； 3、圖片垂直排列； 4、圖片加載依然需要JS。查看全部
-
JS方式的優(yōu)缺點： 1、需要計算列數(shù)； 2、橫向、順序顯示圖片。查看全部
-
CSS3多欄布局實現(xiàn)圖片布局查看全部
-
JQ版動態(tài)加載圖片： $(window).on("scroll", function(){ if(checkScrollSlide){ $.each(json.images, function(key, val){ var box = $("<div>").addClass("box").appendTo($("#main")), pic = $("<div>").addClass("pic").appendTo(box); // 注意把JS原生對象val轉(zhuǎn)換為JQ對象 $("<img>").attr("src", "images/"+$(val).attr("src")).appendTo(pic); }); waterfall(); } });查看全部
-
JQ版檢查是否滿足了觸發(fā)waterfall的條件： function checkScrollSlide(){ var parent = $("#main"), boxs = parent.find(".box"), lastBox = boxs.last(), lastBoxH = lastBox.offset().top + Math.floor(lastBox.outerHeight() / 2), // 最后一個數(shù)據(jù)塊露出一半高度 sTop = $(window).scrollTop(), // 獲取被卷去的高度 winH = $(window).height(); // 獲取視窗高度 return (lastBoxH < sTop + winH); }查看全部
-
JQ版圖片定位： function waterfall(){ var parent = $("#main"), boxs = parent.find(".box"), boxW = boxs.eq(0).outerWidth(), col = Math.floor($(window).width() / boxW), hs = []; parent.width(boxW * col).css("margin", "0 auto"); boxs.each(function(idx, val){ var bx = $(val), // 注意這里需要把DOM對象val轉(zhuǎn)換為JQ對象 minH = 0, minHIdx = 0; if(idx < col){ hs.push(bx.outerHeight()); } else{ minH = Math.min.apply(null, hs); minHIdx = $.inArray(minH, hs); bx.css({ "position": "absolute", "top": minH + "px", "left": (minHIdx * boxW) + "px" }); hs[minHIdx] = minH + bx.outerHeight(); } }); }查看全部
-
瀑布流布局JS方案：查看全部
-
getElementsByClassName的兼容方案查看全部
-
1、數(shù)據(jù)塊的信息應(yīng)從后臺用JSON傳過來 2、動態(tài)創(chuàng)建的div.box、div.pic等未自動進行l(wèi)eft和top計算，需要再次調(diào)用waterfall函數(shù)查看全部
-
檢查是否具備了加載數(shù)據(jù)塊的條件：判斷最后一個數(shù)據(jù)塊是否已到達(dá)視窗（露出的面積自定義）查看全部
-
圖片排序： 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; } }查看全部
舉報
0/150
提交
取消