-
Javascript 實現瀑布流布局，每個數據塊上的 position 屬性應定義為（absolute） 選項A相對定位是要定義在所有數據塊的父盒子上的，選項B是固定位置，在瀑布流中用不到，選項D為靜態是起不到定位的作用的查看全部
-
jQuery的：對象本質、支持連綴、隱式迭代 Jquery對象本質“可以看成”是一個包含一個 dom數組和所有Jquery方法的容器（補充：方法在所有jq對象共享的jq原型屬性prototype中，jq對象本質是一個“類數組”）。 要使用Jquery，就必須將dom元素轉成 Jquery對象，然后才能調用JQ對象的 便捷方法。 每當我們調用選擇器方法查找dom樹里的元素時，其實就是把找到的dom元素存入一個JQ對象里的dom數組中，然后再把這個JQ對象返回。 當我們調用Jquery方法時（如 html()），jq方法會遍歷內部 dom數組，并調用每個dom元素的對應的dom屬性或方法（如innerHTML），完成操作。 其中Jq方法遍歷內部dom數組的過程就叫做【隱式迭代】。 ①scroll事件 $(window).on('scroll',function(){}); ②獲取結果集中最后一個元素$('#main>div').last(); ③獲取距離頁面頂部的距離$lastBox.offset().top; js:offsetTop ④$(window).scrollTop();滾動條滾動的距離 ⑤$(window).height();瀏覽器可視窗口的高度 ⑥創建元素$('<div>'); ⑦插入元素append和appendTo查看全部
-
1、jQuery是繼prototype之后又一個優秀的Javascript框架 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對象查看全部
-
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);插入對象到尾部查看全部
-
jquery兩大特點：支持連綴，支持隱式迭代~查看全部
-
javascript實現瀑布流布局中圖片排序代碼 圖片排序：（第二行的第一張圖片排列在第一行中高度最矮的那張圖片下面） 【原理】第二行的第一個box排在第一行高度最矮的那個下面，第二個排在次矮的那個下面，以此類推。 【要點】 判斷輸出個數：console.log(hArr); 1、建立存高array ：var hArry=[]; 把i<cols中圖片高度壓入數組中：hArry.push(oBox[i].offsetHeight); 2.第七張圖片加載在前六張中高度最矮的位置下 計算數組中的最小值：var minH=Math.min.apply(null,hArry); 求數組中最小值 Math.min()只能求一組數據的最小值，通過傳參，而不是數組。 借助apply()方法，apply用來改變函數中this的指向，這里用來改變Math對象中的this指向 Math.min.apply(null,hArr); 3.定義left 知道高度最小值的索引index function getMinIndex(arr,val){ for(var i in arr){ if(arr[i]==val){ return i; } } } a、oBox[i].style.left=oBox[index].offsetLeft+'px'; b、oBox[i].style.left=oBoxw*index+'px'; 4、定義第七張圖片的top、left oBox[i].style.postion='absolute'; oBox[i].style.top=minH+'px'; oBox[i].style.left=oBoxw*index+'px'; oBox[i].style.left=oBox[index].offsetLeft+'px'; 5、解決盒子重疊（因為數組未更新，全部以原先數組來比較） hArry[index]+=oBox[i].offsetHeight查看全部
-
JavaScript實現瀑布流布局中圖片定位 **offsetWidth屬性包括padding在內的寬度，而不是元素的width值** 要點： 1.封裝瀑布流的函數waterfall 2.封裝通過className獲取元素集的函數 3.計算一行顯示的列數，父級寬度/box的offsetWidth，注意取整Math.floor； var cols = Math.floor(document.documentElement.clientWidth / oBoxWidth); 4.obj.style.cssText ="",以字符串的形式設置多個樣式查看全部
-
瀑布流 原理： 數據加載的時候通過絕對定位來找到box的位置，而box的位置又是相對于main來定義的，所以main要用position:relative;來定義 特點： 等寬不等高 HTML中的類： #main、.box、.pic 外層套一個div為.box來設置padding作為pic之間的間隔，不推薦margin。因為獲取數據塊高度offset().height能夠獲取padding間距離，而不會獲取margin的間距。 box與box之間用padding來去間隔位置，而不用margin查看全部
-
實現瀑布流布局的三種方法： js原生方法 jquery方法 css3的多欄布局查看全部
-
css3實現的瀑布流和js實現的瀑布流比較:css3性能較高，不過由于他是縱向排列的，先排滿第一列后再從第二列開始排，這樣會破壞圖片原來的順序。其次是css3列間距的計算規則使得在不同尺寸的屏幕中列間距會有較大反差,這樣會影響用戶體驗。js實現的瀑布流不會有上面的兩個缺點，但是性能相對要差！查看全部
-
$.inArray(ele,arr)判斷ele在arr中的index查看全部
-
style.cssText="";可以設置元素的樣式查看全部
-
parent.getElementsByTagName('*'); 通過通配符獲得父元素下的全部子元素查看全部
-
計算數組中的最小值：var minH=Math.min.apply(null,hArry); heightArr[index] += oBoxs[i].offsetHeight; 通過apply改變指向 每次把一張圖片將在一列下面，把這列的高度更新查看全部
-
巨坑??！~·查看全部
舉報
0/150
提交
取消