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