-
每個內div（pic) 要設置成等寬不等高 width: 固定px height: auto;查看全部
-
外層套div，設置padding作為內層div之間的距離。 這樣做的好處是，js計算一般都會取width+padding，這樣便于后面的js代碼計算查看全部
-
@瀑布流布局--4-1 CSS3實現瀑布流布局 【原理】css3多欄布局column 【知識點】 ①column的瀏覽器兼容問題，不同內核要寫其前綴 ②column-width 和column-count沒有必要同時出現 ③column-rule設置列與列之間的邊框 ④column-gap 設置列間距，不一定定義多少，實際就顯示多少。其計算規則：用當前瀏覽器寬口寬除以定義的列寬，剩下的距離平均分配查看全部
-
console.log() 頁面控制臺輸出查看全部
-
width()取到的只是本身的寬度；outerWidth()寬度包含padding和border的值查看全部
-
我自己做的時候容易出錯的地方： ①非jQuery對象要轉換為jQuery對象才能使用jQuery方法，$(obj); 如： var box = $('<div>').addClass('box').appendTo($('#main')); var pic = $('<div>').addClass('pic').appendTo($(box)); each函數中value-》$(value) var img = $('<img>').appendTo($(pic)).attr('src',$(value).attr('src')); ②結果集中取出其中之一，用eq()方法，而不是原生數組的方法。查看全部
-
@瀑布流布局--5-1 瀑布流布局實現方式比較 【css3和js實現方法比較】 --css3方式-- 1：不需要計算，瀏覽器自動計算，只需設置1列寬，性能高 2:列寬隨著瀏覽器寬口大小進行改變，用戶體驗不好； 3：圖片排序按照垂直順序排列，打亂圖片顯示順序 4.圖片加載還是需要js --js方式-- js實現的瀑布流不會有上面的缺點，但是性能相對要差！查看全部
-
@瀑布流布局--4-1 CSS3實現瀑布流布局 【原理】css3多欄布局column 【知識點】 ①column的瀏覽器兼容問題，不同內核要寫其前綴 ②column-width 和column-count沒有必要同時出現 ③column-rule設置列與列之間的邊框 ④column-gap 設置列間距，不一定定義多少，實際就顯示多少。其計算規則：用當前瀏覽器寬口寬除以定義的列寬，剩下的距離平均分配查看全部
-
@瀑布流布局--3-2 jQurey實現瀑布流布局的圖片加載功能 【知識點】 ①scroll事件 $(window).on('scroll',function(){}); ②獲取結果集中最后一個元素$('#main>div').last(); ③獲取距離頁面頂部的距離$lastBox.offset().top; ④$(window).scrollTop();滾動條滾動的距離 ⑤$(window).height();瀏覽器可視窗口的高度 ⑥創建元素$('<div>'); ⑦插入元素append和appendTo jQuery兩大優點：支持連綴，隱式迭代。 【注意】 $.eanch(arr,function(key,value){ }) 中value非Jquery對象，獲取其src值，用attr（），需要將其轉化為非Jquery對象，即：$(value).attr('src');查看全部
-
@瀑布流布局--3-1 jQurey實現瀑布流布局圖片定位 【知識點】 1.$("#main>div")只匹配一級子元素；$("#main div")匹配所有的子元素 2.$("#main>div").eq(0).width()取到的只是本身的寬度； $("#main>div").eq(0).outerWidth()寬度包含padding和border的值 3.取瀏覽器寬度:$(window).width()；width()即可獲取，也可設置。設置時，參數不帶單位。 4.jQuery遍歷的函數each $boxs.each(function(index,value){ }); index 索引值，value對應的值 5.eq(n),從結果集中選取第n的元素 6.$.inArray(value,arr)工具函數，用來判斷某個值在數組中的索引 7.each遍歷的value是DOM對象。將value DOM對象轉換為jQuery對象才能使用其方法 ：$(value)查看全部
-
瀑布流布局代碼查看全部
-
通過類名去獲取元素的方法 1.第一個參數為必需的，第二個參數為可選的 2.第一個參數為要獲取的元素的類名，第二個參數如果傳，則傳父元素的id，不傳則默認用document查看全部
-
@瀑布流布局---2-6 onscroll事件實現瀑布流布局的圖片加載功能 【原理】 當滾動滾動條時，判斷是否要加載新的圖片，通過一個函數，返回布爾值。 需要加載的條件： 頁面最下面的元素box在視口中露出一半的高度時，開始加載。具體計算：(scrollTop+可視寬口高度)>(box.offsetTop+自身高度一半)時，加載（如圖所示）。 【知識點】 ①scrollTop標準模式和混雜模式的兼容問題。 標準模式--document.body.scrollTop 混雜模式--document.documentElement.scrollTop; 兼容的寫法：var scrollTop = document.body.scrollTop||document.documentElement.scrollTop; ②當前瀏覽器的可視窗口的高度 標準模式--document.body.clientHeight 混雜模式--document.documentElement.clientHeight; ③三元運算符代替if..else(比較簡便) ④數據加載：將來自后臺的json數據渲染到前端 創建元素,將數據填進去（這里是img的src） ⑤document.createElement創建元素 parentObj.appendChild(obj);插入元素查看全部
-
@瀑布流布局----2-5 JavaScript實現瀑布流布局中圖片排序 【原理】第二行的第一個box排在第一行高度最矮的那個下面，第二個排在次矮的那個下面，以此類推。 需要一個數組，存放每行每個box的offsetHeight的數組 【要點】 1.求數組中最小值 Math.min()只能求一組數據的最小值，通過傳參，而不是數組。 借助apply()方法，apply用來改變函數中this的指向，這里用來改變Math對象中的this指向 Math.min.apply(null,hArr); 2.求最小值在數組中的索引 封裝函數getIndex 3.圖片定位(兩種方法) position:absolute; 4.存放offsetHeight的數組值hArr要不斷更改 在每次定位之后，最小高度的box加上定位在其下的box的offsetHeight ；即：hArr[index]+=oBox[i].offsetHeight;查看全部
-
@瀑布流布局---2-3 JavaScript實現瀑布流布局中圖片定位 **offsetWidth屬性包括padding在內的寬度，而不是元素的width值** 要點： 1.封裝瀑布流的函數waterfall 2.封裝通過className獲取元素集的函數 3.計算一行顯示的列數，父級寬度/box的offsetWidth，注意取整Math.floor； 4.obj.style.cssText ="",以字符串的形式設置多個樣式查看全部
舉報
0/150
提交
取消