-
JQ實現瀑布流圖片定位 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對象查看全部
-
加載條件邏輯查看全部
-
@瀑布流布局----2-5 JavaScript實現瀑布流布局中圖片排序 【原理】第二行的第一個box排在第一行高度最矮的那個下面,第二個排在次矮的那個下面,以此類推。 需要一個數組,存放每行每個box的offsetHeight的數組 【要點】 1.求數組中最小值 Math.min()只能求一組數據的最小值,通過傳參,而不是數組。 借助apply()方法,apply用來改變函數中this的指向,這里用來改變Math對象中的this指向(apply方法不僅可以更改this的指向,還有一點后面的參數是以數組的形式傳進來的,這也它是跟call的一個最大區別,隱式的拉平數組) Math.min.apply(null,hArr); 2.求最小值在數組中的索引 封裝函數getIndex 3.圖片定位(兩種方法) position:absolute; 4.存放offsetHeight的數組值hArr要不斷更改 在每次定位之后,最小高度的box加上定位在其下的box的offsetHeight ;即:hArr[index]+=oBox[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 ="",以字符串的形式設置多個樣式查看全部
-
混雜模式 document.body.scrollTop 標準模式 document.documentElement.scrollTop查看全部
-
$boxs.each(function(index,value){}) $.each(boxs,function(index.vlaue){})查看全部
-
$("<img">).attr("src","img/1.jpg");查看全部
-
$("<div>").addClass("box").appendTo("#main")查看全部
-
$.inArray(value,array)求value在數組array中的位置查看全部
-
$("boxs").each(function(index,value){}),其中index就是索引值,從0開始,value就是boxs下的每個dom元素。 注意:dom元素是無法調用jquery的方法,必須要用轉化,方式:$(dom)。 $(dom).css({"width": "100px";})查看全部
-
$("#main>div")取到main下的一級div,$("main div")取到main下的所有的div.查看全部
-
瀑布流等寬不等高查看全部
-
源生對象 jquery中需要轉變成jqury 才能引用jquery方法 value==》$(value)查看全部
-
box-sizing: border-box;查看全部
-
<link rel="stylesheet" href="css/style.css" />根據鏈接下的href="css/style.css",必須創建css文件夾,將css文件放到此目錄下查看全部
舉報
0/150
提交
取消