-
每个内div（pic) 要设置成等宽不等高 width: 固定px height: auto;查看全部
-
外层套div，设置padding作为内层div之间的距离。 这样做的好处是，js计算一般都会取width+padding，这样便于后面的js代码计算查看全部
-
@瀑布流布局--4-1 CSS3实现瀑布流布局 【原理】css3多栏布局column 【知识点】 ①column的浏览器兼容问题，不同内核要写其前缀 ②column-width 和column-count没有必要同时出现 ③column-rule设置列与列之间的边框 ④column-gap 设置列间距，不一定定义多少，实际就显示多少。其计算规则：用当前浏览器宽口宽除以定义的列宽，剩下的距离平均分配查看全部
-
console.log() 页面控制台输出查看全部
-
width()取到的只是本身的宽度；outerWidth()宽度包含padding和border的值查看全部
-
我自己做的时候容易出错的地方： ①非jQuery对象要转换为jQuery对象才能使用jQuery方法，$(obj); 如： var box = $('<div>').addClass('box').appendTo($('#main')); var pic = $('<div>').addClass('pic').appendTo($(box)); each函数中value-》$(value) var img = $('<img>').appendTo($(pic)).attr('src',$(value).attr('src')); ②结果集中取出其中之一，用eq()方法，而不是原生数组的方法。查看全部
-
@瀑布流布局--5-1 瀑布流布局实现方式比较 【css3和js实现方法比较】 --css3方式-- 1：不需要计算，浏览器自动计算，只需设置1列宽，性能高 2:列宽随着浏览器宽口大小进行改变，用户体验不好； 3：图片排序按照垂直顺序排列，打乱图片显示顺序 4.图片加载还是需要js --js方式-- js实现的瀑布流不会有上面的缺点，但是性能相对要差！查看全部
-
@瀑布流布局--4-1 CSS3实现瀑布流布局 【原理】css3多栏布局column 【知识点】 ①column的浏览器兼容问题，不同内核要写其前缀 ②column-width 和column-count没有必要同时出现 ③column-rule设置列与列之间的边框 ④column-gap 设置列间距，不一定定义多少，实际就显示多少。其计算规则：用当前浏览器宽口宽除以定义的列宽，剩下的距离平均分配查看全部
-
@瀑布流布局--3-2 jQurey实现瀑布流布局的图片加载功能 【知识点】 ①scroll事件 $(window).on('scroll',function(){}); ②获取结果集中最后一个元素$('#main>div').last(); ③获取距离页面顶部的距离$lastBox.offset().top; ④$(window).scrollTop();滚动条滚动的距离 ⑤$(window).height();浏览器可视窗口的高度 ⑥创建元素$('<div>'); ⑦插入元素append和appendTo jQuery两大优点：支持连缀，隐式迭代。 【注意】 $.eanch(arr,function(key,value){ }) 中value非Jquery对象，获取其src值，用attr（），需要将其转化为非Jquery对象，即：$(value).attr('src');查看全部
-
@瀑布流布局--3-1 jQurey实现瀑布流布局图片定位 【知识点】 1.$("#main>div")只匹配一级子元素；$("#main div")匹配所有的子元素 2.$("#main>div").eq(0).width()取到的只是本身的宽度； $("#main>div").eq(0).outerWidth()宽度包含padding和border的值 3.取浏览器宽度:$(window).width()；width()即可获取，也可设置。设置时，参数不带单位。 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)查看全部
-
瀑布流布局代码查看全部
-
通过类名去获取元素的方法 1.第一个参数为必需的，第二个参数为可选的 2.第一个参数为要获取的元素的类名，第二个参数如果传，则传父元素的id，不传则默认用document查看全部
-
@瀑布流布局---2-6 onscroll事件实现瀑布流布局的图片加载功能 【原理】 当滚动滚动条时，判断是否要加载新的图片，通过一个函数，返回布尔值。 需要加载的条件： 页面最下面的元素box在视口中露出一半的高度时，开始加载。具体计算：(scrollTop+可视宽口高度)>(box.offsetTop+自身高度一半)时，加载（如图所示）。 【知识点】 ①scrollTop标准模式和混杂模式的兼容问题。 标准模式--document.body.scrollTop 混杂模式--document.documentElement.scrollTop; 兼容的写法：var scrollTop = document.body.scrollTop||document.documentElement.scrollTop; ②当前浏览器的可视窗口的高度 标准模式--document.body.clientHeight 混杂模式--document.documentElement.clientHeight; ③三元运算符代替if..else(比较简便) ④数据加载：将来自后台的json数据渲染到前端 创建元素,将数据填进去（这里是img的src） ⑤document.createElement创建元素 parentObj.appendChild(obj);插入元素查看全部
-
@瀑布流布局----2-5 JavaScript实现瀑布流布局中图片排序 【原理】第二行的第一个box排在第一行高度最矮的那个下面，第二个排在次矮的那个下面，以此类推。 需要一个数组，存放每行每个box的offsetHeight的数组 【要点】 1.求数组中最小值 Math.min()只能求一组数据的最小值，通过传参，而不是数组。 借助apply()方法，apply用来改变函数中this的指向，这里用来改变Math对象中的this指向 Math.min.apply(null,hArr); 2.求最小值在数组中的索引 封装函数getIndex 3.图片定位(两种方法) position:absolute; 4.存放offsetHeight的数组值hArr要不断更改 在每次定位之后，最小高度的box加上定位在其下的box的offsetHeight ；即：hArr[index]+=oBox[i].offsetHeight;查看全部
-
@瀑布流布局---2-3 JavaScript实现瀑布流布局中图片定位 **offsetWidth属性包括padding在内的宽度，而不是元素的width值** 要点： 1.封装瀑布流的函数waterfall 2.封装通过className获取元素集的函数 3.计算一行显示的列数，父级宽度/box的offsetWidth，注意取整Math.floor； 4.obj.style.cssText ="",以字符串的形式设置多个样式查看全部
举报
0/150
提交
取消