-
設置mian盒子的寬度，然后居中！查看全部
-
JQUERY 1:outerHeight:包含邊框和padding內邊距，不包含margin $(window).on("load",function(){ waterfall(); }) function waterfall(){ var boxs = $("#main > div"); var w = boxs.eq(0).outerWidth(); //求一排幾個數 var cols = Math.floor($(window).width()/w); //給main設置寬 $("#main").width(cols * w).css("margin","0 auto"); var arr = []; boxs.each(function(index,value){ //console.log(index); ////求每個盒子自身的高度 var h = boxs.eq(index).outerHeight(); //如果索引小于第一排個數（6個/排）,把它的高放數組內 if(index < cols){ arr[index] = h; }else{ var min = Math.min.apply(null,arr); //傳入參數的index在數組的索引 var mindex = $.inArray(min,arr); $(value).css({ "position":"absolute", "top": min+"px", "left": mindex * w +"px" }) //重新賦值 arr[mindex]+=boxs.eq(index).outerHeight; } }) } </script>查看全部
-
jquery 2: outerHeight:包括邊框 ，邊距 Height:不包括邊框 value是dom 對象需用$（value）來轉換查看全部
-
第22行代碼錯了，還有html : function getByClass(clsName, parent){ //定義函數getByClass()實現獲取document或指定父元素下所有class為on的元素 var Oarr=[]; // var oParent=parent?document.getElementById(parent):document, /* var Oparent=document.getElementById(parent)||document; var oElement=Oparent.getElementsByTagName("*");*/ if(parent){ var Oparent=document.getElementById(parent); var oElement=Oparent.getElementsByTagName("*"); }else{ var oElement=document.getElementsByTagName("*"); } for(var i=0; i<oElement.length; i++){ if(oElement[i].className==clsName){ Oarr.push(oElement[i]); } } return Oarr; }查看全部
-
記?。篣ncaught SyntaxError: Unexpected end of input 引用錯誤了，圖片引用不對無顯示查看全部
-
下半部： function waterfall(parent,box){ var oparent = document.getElementById(parent); //main所有的class叫box的取出來 var oboxs= getByClass(oparent,box); //console.log(obox.length); //計算整個頁面顯示列數（頁面寬/box寬） var oboxw = oboxs[0].offsetWidth; var cols = Math.floor(document.documentElement.clientWidth/oboxw); //設置main寬 var w = oparent.style.cssText = "width:"+oboxw *cols +"px;margin:0 auto"; //存放每列高度的數組 var harr = []; for(var i=0; i<oboxs.length; i++){ if(i<cols){ //一組高度 harr.push(oboxs[i].offsetHeight); }else{ ////min方法只能第一組方法，不能對很多數組，所以用apply改變this指向 var hmin = Math.min.apply(null,harr); var index = getIndex(harr,hmin); oboxs[i].style.position = "absolute"; oboxs[i].style.top = hmin+"px"; //oboxs[i].style.left = oboxw*index +"px"; oboxs[i].style.left = oboxs[index].offsetLeft +"px"; //修改原來最小值：給它再賦值（把它原來的高+后面下面那個盒子的高）146+后面圖片高 harr[index] += oboxs[i].offsetHeight; } } //console.log(harr); }查看全部
-
for循環外調用 waterfall 函數 //滾動條判斷檢測是否具備滾動條加載數據庫的條件 function checkScrollSlide(){ var oparent = document.getElementById("main"); var oboxs = getByClass(oparent,"box"); //最后一個盒子自身一半到頂點的高度 var lasth = oboxs[oboxs.length-1].offsetTop+Math.floor(oboxs[oboxs.length-1].offsetHeight/2); var scrolltop = document.body.scrollTop||document.documentElement.scrollTop; console.log(scrolltop); //瀏覽器窗口的高度 var height = document.body.clientHeight||document.documentElement.clientHeight; //最后一塊小于滾動條加瀏覽器的高度時返回true加載 return (lasth < scrolltop + height)?true:false; }查看全部
-
js 上：//獲取classname為cls的數組 function getByClass(parent,cls){ var boxArr = new Array(), //存儲class為box的元素 oelements = parent.getElementsByTagName("*"); for(var i=0; i<oelements.length; i++){ if(oelements[i].className == cls){ boxArr.push(oelements[i]); } } return boxArr; } //獲取最小值的索引,如果arr數組中的某一個等于我們傳的數字val,返回他索引 function getIndex(arr,val){ for(var i in arr){ if(arr[i]==val){ return i; } } } //滾動條判斷檢測是否具備滾動條加載數據庫的條件查看全部
-
藍線（最后一張圖片的offsetTop + 自身盒子的高度一半）小于黑線時才開始加載scroll最后一張圖片查看全部
-
var harr = []; for(var i=0; i<oboxs.length; i++){ if(i<cols){ //高度 harr.push(oboxs[i].offsetHeight); }else{ ////min方法只能是一組方法，不能對多數組，用apply改變this指向 var hmin = Math.min.apply(null,harr); var index = getIndex(harr,hmin); oboxs[i].style.position = "absolute"; oboxs[i].style.top = hmin+"px"; //oboxs[i].style.left = oboxw*index +"px"; oboxs[i].style.left = oboxs[index].offsetLeft +"px"; //修改原來最小值：給它再賦值（把它原來的高+后面下面那個盒子的高）146+后面圖片高 harr[index] += oboxs[i].offsetHeight; } } console.log(harr); } //cls的數組 function getByClass(parent,cls){ var boxArr = new Array(), //存box的元素 oelements = parent.getElementsByTagName("*"); for(var i=0; i<oelements.length; i++){ if(oelements[i].className == cls){ boxArr.push(oelements[i]); } } return boxArr; } //最小索引,如arr數組某一個等于傳的val,返回他索引 function getIndex(arr,val){ for(var i in arr){ if(arr[i]==val){ return i; } } }查看全部
-
js 2:http: apply：//www.jb51.net/article/42705.htm查看全部
-
瀑布流js樣式:火狐在日志里看console.log(box.length)的長度 ，sublime 在控制臺console里查看全部
-
Javascript 實現瀑布流布局，每個數據塊上的 position 屬性應定義為（absolute）？ 選項Arelative相對定位是要定義在所有數據塊的父盒子上的，選項Bfixed是固定位置，在瀑布流中用不到，選項D為靜態是起不到定位的作用的查看全部
-
html 布局 <div id="main"> <div class="box"> <div class="pic"> <img src="../img/1H.ico"/> </div> </div> <div class="box"> <div class="pic"> <img src="../img/DD.ico"/> </div> </div> <div class="box"> <div class="pic"> <img src="../img/GM.ico"/> </div> </div> <div class="box"> <div class="pic"> <img src="../img/JD.ico"/> </div> </div> <div class="box"> <div class="pic"> <img src="../img/JM.ico"/> </div> </div> <div class="box"> <div class="pic"> <img src="../img/SN.ico"/> </div> </div> <div class="box"> <div class="pic"> <img src="../img/TB.ico"/> </div> </div> </div>查看全部
-
瀑布流布局等寬不等高css： *{padding:0; margin:0; } #main {position:relative; } #main .box{padding:15px 0 0 15px; float:left;} #main .box .pic{padding:10px; border:1px solid #ccc; border-radius:5px; box-shadow:0 0 5px #ccc; } #main .box .pic img{width:165px; height:auto; } </style>查看全部
舉報
0/150
提交
取消