-
设置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; }查看全部
-
记住：Uncaught 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
提交
取消