瀑布流布局_技术笔记

半世烟云落 2018-04-15

$.inArray(min.attr);
找到min在attr数组中的索引号

0赞 · 0采集
半世烟云落 2018-04-15

width()：只获取定义的宽度
outerWidth(): 获取div的整个宽度，包括border,padding,margin

0赞 · 0采集
慕仙5237505 2017-11-20

少写了括号outerHeight(); DD.ico 大小写错

0赞 · 0采集
慕仙5237505 2017-11-20

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>

截图
0赞 · 0采集
慕仙5237505 2017-11-19

jquery 2: outerHeight:包括边框，边距 Height:不包括边框 value是dom 对象需用$（value）来转换

截图
1赞 · 0采集
慕瓜5189485 2017-11-10

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; //更新添加了块框后的列高 } }); }

0赞 · 0采集
超级无敌可爱的美少女 2017-09-22

jquery瀑布流

截图
0赞 · 0采集
qz不忘初心 2017-09-07

Dom对象不能使用jquery对象的方法加$就转换成了jquery对象

截图
0赞 · 0采集
qz不忘初心 2017-09-07

inArray(val,array)根据值求这个值在数组中的索引值

截图
0赞 · 0采集
qz不忘初心 2017-09-07

width = content area innerWidth = content area + padding outerWidth = content area + padding + border outerWidth(true) = content area + padding + border + margin

0赞 · 0采集
三人非友 2017-08-17

water fall

截图
0赞 · 0采集
微风灬唐唐 2017-08-16

width = content area innerWidth = content area + padding outerWidth = content area + padding + border outerWidth(true) = content area + padding + border + margin

0赞 · 1采集
白小九 2017-07-30

JQ版图片定位： function waterfall(){ var parent = $("#main"), boxs = parent.find(".box"), boxW = boxs.eq(0).outerWidth(), col = Math.floor($(window).width() / boxW), hs = []; parent.width(boxW * col).css("margin", "0 auto"); boxs.each(function(idx, val){ var bx = $(val), // 注意这里需要把DOM对象val转换为JQ对象 minH = 0, minHIdx = 0; if(idx < col){ hs.push(bx.outerHeight()); } else{ minH = Math.min.apply(null, hs); minHIdx = $.inArray(minH, hs); bx.css({ "position": "absolute", "top": minH + "px", "left": (minHIdx * boxW) + "px" }); hs[minHIdx] = minH + bx.outerHeight(); } }); }

截图
0赞 · 0采集
yaya_ling 2017-07-11

width():只包括元素定义的宽度 outerWidth():不光包括元素的宽度还包括元素定义的padding、border等 height()/outerHeight同理获取数组中最小值的索引：$.inArray(val,array)

0赞 · 0采集
慕粉1859391281 2017-04-10

jq用each代替for进行循环

截图
0赞 · 0采集
redli_0 2017-02-14

inArray（value，array）意思为在数组中找到value这个值的索引， value对应的是一个DOM对象，可以用$(value)转换成jquery对象，如果不转，无法使用jQuery功能。

0赞 · 0采集
redli_0 2017-02-14

Math.min（)不支持传递数组，因此要写成Math.min（null,hArr).

0赞 · 0采集
xiaobin90 2017-01-22

jq获取元素宽度 $('.box:first').outerWidth() width为元素定义的width，而outerWidth为元素所占用的width，包含padding和margin值

0赞 · 0采集
慕田峪3555374 2017-01-16

jq方式

截图
0赞 · 0采集
给我一杯咖啡 2017-01-06

$（）转化为jquery对象使用jquery方法css

截图
0赞 · 0采集
给我一杯咖啡 2017-01-06

each遍历

截图
0赞 · 0采集
空之境界丶 2016-11-14

页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。(可以说：ready 在onload 前加载！！！) 一般样式控制的，比如图片大小控制放在onload 里面加载;

0赞 · 0采集
穹楼寒冰 2016-11-04

>为子元素，，“”为所有的后代元素 width为元素定义的width，而outerWidth为元素所占用的width，包含padding和margin值

0赞 · 0采集
陪伴是最长情的告白9 2016-10-23

value变成$（value）是把value变成了jQuery对象，可以加 .css()设置属性

截图
0赞 · 0采集
陪伴是最长情的告白9 2016-10-23

$.inArrey(minh,Harr)判断minh在Harr中的索引

截图
0赞 · 1采集
陪伴是最长情的告白9 2016-10-23

$.inArrey()判断值在数组中出现的索引

截图
0赞 · 0采集
慕运维4918896 2016-10-23

inarray

截图
0赞 · 0采集
慕粉3724715 2016-10-20

alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(document.body).height());//浏览器时下窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度包括border padding margin alert($(window).width()); //浏览器时下窗口可视区域宽度 alert($(document).width());//浏览器时下窗口文档对于象宽度 alert($(document.body).width());//浏览器时下窗口文档body的高度 alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度包括border padding margin alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度 alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度

0赞 · 0采集
慕工程2957023 2016-10-19

jQuery遍历的函数each $boxs.each(function(index,value){ }); index 索引值，value对应的值是一个DOM对象，可以用$(value)转换成jquery对象

0赞 · 0采集
慕工程2957023 2016-10-19

求minH在数组hArr中的索引：$.inArray(minH,hArr); 求数组最小值var minH=Math.min.apply(null,hArr);

0赞 · 0采集

数据加载中...