-
Math.min.apply(null,hArr),求數組中最小值查看全部
-
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、$(window).width() 瀏覽器視窗的寬度 outerWidth() = padding+border+width; width() = width 3、$.inArray(所找元素,數組) 該方法用于獲取元素的索引 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) jQuery的$.inArray()方法直接可以得到一個數在數組中的索引 $(dom) 將Dom對象轉換成jQuery對象 each遍歷的value是DOM對象。將value DOM對象轉換為jQuery對象才能使用其方法 :$(value)查看全部
-
瀑布流布局--4-1 CSS3實現瀑布流布局 【原理】css3多欄布局column 【知識點】 ①column的瀏覽器兼容問題,不同內核要寫其前綴 ②column-width 和column-count沒有必要同時出現 ③column-rule設置列與列之間的邊框 ④column-gap 設置列間距,不一定定義多少,實際就顯示多少。其計算規則:用當前瀏覽器寬口寬除以定義的列寬,剩下的距離平均分配查看全部
-
此例為例 加載的臨界條件:頁面顯示的最后一張圖片顯示50%的后拖動滾動條開始加載 判斷:滾動條拖動的高度+瀏覽器高度>=該圖片的offsetTop+圖片高度的一半查看全部
-
獲取數組中的最小值:Math.min.apply(null,ArrayName);查看全部
-
parent.getElementByTagName("*");獲取當前元素下所有子元素查看全部
-
父盒子相對定位,所有的子盒子絕對定位查看全部
-
用padding而不用換margin的原因:js獲取數據塊的高度時( offsetHeight) 包括圖片所在的盒子高度和數據塊間的距離 offsetHeight包含padding的值而不能將margin的值計入在內查看全部
-
瀑布流布局特點:數據塊等寬不等高,隨著下拉條的滾動,慢慢加載如蘑菇街查看全部
-
onscroll事件實現瀑布流布局的圖片加載功能 【原理】 當滾動滾動條時,判斷是否要加載新的圖片,通過一個函數,返回布爾值。 需要加載的條件: 頁面最下面的元素box在視口中露出一半的高度時,開始加載。具體計算:(scrollTop+可視寬口高度)>(box.offsetTop+自身高度一半)時,加載(如圖所示)。 【知識點】 ①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;查看全部
-
瀑布流布局 等寬不等高查看全部
-
jq實現方式查看全部
-
Javascript 實現瀑布流布局, 父級的應為relative 每個數據塊上的 position 屬性應定義為(absolute)查看全部
舉報
0/150
提交
取消