-
cssText=""+colsw*clos + "px" "查看全部
-
jQuery的：對象本質、支持連綴、隱式迭代 Jquery對象本質“可以看成”是一個包含一個 dom數組和所有Jquery方法的容器（補充：方法在所有jq對象共享的jq原型屬性prototype中，Jquery對象本質是一個“類數組”）。所以一個dom節點元素或者js對象,如果不轉換成Jquery對象,就不會包含Jquery方法,就無法使用jq的方法. 每當我們調用選擇器方法獲取dom樹里的元素時，其實就是把找到的dom元素存入一個JQ對象里的dom數組中，然后再把這個JQ對象返回。 當我們調用Jquery方法時（如 html()），jq方法會遍歷內部 dom數組，并調用每個dom元素的對應的dom屬性或方法（如innerHTML），完成操作。 其中Jq方法遍歷內部dom數組的過程就叫做【隱式迭代】。 【隱式迭代】 $(".A").addClass("B"); 像這樣的就是隱式迭代 因為$(".A")選到的元素不一定只有一個 比如$(".A")選中10個元素 這10個元素都會加上"B"這個class 在jq中，所有的方法都被設計成自動操作對象集合，而不是單一的一個對象. 貌似除了ID選擇器其它都是隱式迭代的(ID選擇器只是將數組大小設置成為1而已,所以$("#A") 就算有多個id="A" 也只能得到第1個) ①scroll事件 $(window).on('scroll',function(){}); ②獲取結果集中最后一個元素$('#main>div').last(); ③獲取距離頁面頂部的距離$lastBox.offset().top; js:offsetTop ④$(window).scrollTop();滾動條滾動的距離 ⑤$(window).height();瀏覽器可視窗口的高度 ⑥創建元素$('<div>'); ⑦插入元素append和appendTo查看全部
-
頁面加載完成有兩種事件，一是ready，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件），二是onload，指示頁 面包含圖片等文件在內的所有元素都加載完成。(可以說：ready 在onload 前加載?。?！) 一般樣式控制的，比如圖片大小控制放在onload 里面加載;查看全部
-
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);插入對象到尾部查看全部
-
瀑布流布局----JavaScript實現瀑布流布局中圖片排序 【原理】用一個數組存放每列的高度,當有新的圖片加進來時,新圖片總是加在列高最小的那一列,新圖片加進來后,數組中相應的列的高度也相應增加. 【要點】 1.求數組中最小值 Math.min()只能求一組數據的最小值，通過傳參數列表，而不是數組。 借助apply()方法,1.將數組轉換為參數列表，2.改變函數中this的指向(本節課用不到此功能) Math.min.apply(null,hArr); 2.求最小值在數組中的索引 封裝函數getIndex 3.圖片定位(兩種方法) position:absolute; top:minH+’px’; 1).left:oBoxW*index+’px’; 2).left:oBoxs[index].offsetLeft+’px’; 4.存放offsetHeight的數組值hArr要不斷更改 在每次加入新圖片后，最小高度的box加上定位在其下的box的offsetHeight ；即：hArr[index]+=oBoxs[i].offsetHeight;查看全部
-
**offsetWidth屬性包括padding在內的寬度，而不是元素的width值** offsetWidth = 內容寬度 + 內邊距寬度×2 +邊框寬度×2 【不包括外邊距margin】 要點： 1.封裝瀑布流的函數waterfall 2.封裝通過className獲取元素集的函數 （原因：因為ie8以下不兼容classname，所以要封裝一個函數來獲取，如果存在多個className的情況，那么if(oElements[i].className.split(" ").indexOf(className)!==-1){……} 進行判斷就OK了。如圖） 3.計算一行顯示的列數，父級寬度/box的offsetWidth，注意取整Math.floor； var cols = Math.floor(document.documentElement.clientWidth / oBoxWidth); （獲取頁面可見寬度可能會出現兼容問題，可用var h = window.innerHeight || document.documentElement.clientWidth || document.body.clientWidth; //Width,Height同理） 4.obj.style.cssText ="",以字符串的形式設置多個樣式查看全部
-
JS實現的瀑布流效果和CSS3實現的瀑布流效果比較: 1、JS方式 1-1、需要計算，列數=瀏覽器窗口寬度/圖片寬度，圖片定位是根據每一列數據塊的高度計算接下來的圖片的位置 1-2、圖片排序是按照圖片計算的位置橫向排列，位置是計算出來的，比較規范 2、CSS方式 2-1、不需要計算，瀏覽器會自動計算列數，只需要設置列寬，性能高 2-2、列寬隨著瀏覽器窗口大小進行改變，用戶體驗不好 2-3、圖片順序按照垂直順序排列，打亂圖片顯示順序 2-4、拖到滾動條加載圖片還是依靠JavaScript或JQuery來實現查看全部
-
實現瀑布流的三種方法： js原生方法 jquery方法： css的多欄布局查看全部
-
瀑布流：等寬不等高查看全部
-
瀑布流的原理在于：利用絕對定位固定圖片位置，圖片等寬不等高。新東西：圖片陰影（box-shadow）、圓角（border-radius）、用padding與margin的微妙區別。 設置邊距使用padding而不是用margin，是因為offsetHight獲取的高度包括padding 圓角：border-redius：5px；設置四個角為圓角，該值越大越趨向于圓形 陰影：box-shadow：水平 垂直 模糊程度 顏色；查看全部
-
-webkit-column-width 定義一列的寬度，瀏覽器根據屏幕可視寬度來計算列數 1,2,3豎著排查看全部
-
css js script查看全部
-
相對定位在父元素上查看全部
-
$.each([2,3,4],function(index,value){alert('第'+ index+ '數是'+value);}); $.each({a:3,b:'g'},function(index,value){alert('屬性'+ index+ '的值是'+value);});查看全部
-
>為子元素，，“”為所有的后代元素 width為元素定義的width，而outerWidth為元素所占用的width，包含padding和margin值查看全部
舉報
0/150
提交
取消