-
瀑布流布局：等宽不等高查看全部
-
var dataInt = { 'data': [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }] }; window.onscroll = function() { if(checkscrollside()) { $.each(dataInt.data, function(index, value) { var oBox = $('<div>').addClass('box').appendTo($("#main")); var oPin = $('<div>').addClass('pin').appendTo($(oBox)); $('<img>').attr('src', './images/' + $(value).attr('src')).appendTo($(oPin)); }); waterfall(); }; function checkscrollside() { var $aPin = $("#main>div").last(); var lastPinH = $aPin.offset().top + Math.floor($aPin.outerHeight() / 2); //创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载) var scrollTop = $(window).scrollTop() //注意解决兼容性 var documentH = $(document).width(); //页面高度 return(lastPinH < scrollTop + documentH) ? true : false; //到达指定高度后 返回true，触发waterfall()函数 }查看全部
-
function waterfall() { var $aPin = $("#main>div"); var iPinW = $aPin.eq(0).outerWidth(); // 一个块框pin的宽 var num = Math.floor($(window).width() / iPinW); $("#main").css({ width: iPinW * num, margin: '0 auto' }); var pinHArr = []; //用于存储 每列中的所有块框相加的高度。 $aPin.each(function(index, value) { var pinH = $aPin.eq(index).outerHeight(); if(index < num) { pinHArr[index] = pinH; //第一行中的num个块框pin 先添加进数组pinHArr } else { var minH = Math.min.apply(null, pinHArr); //数组pinHArr中的最小值minH var minHIndex = $.inArray(minH, pinHArr); //判断最小高度的索引 $(value).css({ position: 'absolute', top: minH + 15, left: $aPin.eq(minHIndex).position().left }); //数组 最小高元素的高 + 添加上的aPin[i]块框高 pinHArr[minHIndex] += $aPin.eq(index).height() + 15; //更新添加了块框后的列高 } }); }查看全部
-
css3多栏布局column 1、column的浏览器兼容问题，不同内核要写其前缀 -webkit Google浏览器内核 -ms IE -o opera -moz 火狐FireFox 2、column-width 和column-count没有必要同时出现 3、column-rule设置列与列之间的边框 4、column-gap 设置列间距，不一定定义多少，实际就显示多少。其计算规则：用当前浏览器宽口宽除以定义的列宽，剩下的距离平均分配查看全部
-
floor ceil round查看全部
-
实现瀑布流的三种方式 1.JS 2.css3查看全部
-
window.onload = function () { waterfall(); } function waterfall() { var boxs = document.getElementsByClassName('box'); var boxwidth = boxs[0].offsetWidth; var row = document.documentElement.clientWidth/boxwidth; row = Math.floor(row); // console.log(row); var boxHeiArr = []; for (var i = 0; i <row - 1; i++) { var boxHeight = boxs[i].offsetHeight; boxHeiArr.push(boxHeight); } for (var j =row; j <boxs.length; j++) { var min = Math.min.apply(null,boxHeiArr); var index = boxHeiArr.indexOf(min); boxs[j].style.position = "absolute"; boxs[j].style.top = boxHeiArr[index]+"px"; boxs[j].style.left = index * boxs[j].offsetWidth+"px"; boxHeiArr[index] += boxs[j].offsetHeight; } }查看全部
-
getClass(parent,className); function getClass(parent,clasName){ var boxArr = []; //用来存储获取到的所有class为box的元素 var oElements = parent.getElementsByTagName("*"); for(var i = 0;i<oElements.length; i++){ if(oElements[i].className == clasName){ boxArr.push(oElement[i]); } } return boxArr; }查看全部
-
function getByClass(clsName, parent){ //定义函数getByClass()实现获取document或指定父元素下所有class为on的元素 var Oarr=[]; /* 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; }查看全部
-
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置查看全部
-
网页可见区域宽：document.body.clientWidth查看全部
-
三种方法实现瀑布流布局查看全部
-
jquery添加图片查看全部
-
jquery瀑布流查看全部
-
XXX.style.cssText以字符串的形式设置css样式查看全部
举报
0/150
提交
取消