-
边框阴影样式查看全部
-
三种方法可以实现瀑布流布局：查看全部
-
$()可以把DOM对象转成jQuery对象查看全部
-
jQuery的$.inArray()方法直接可以得到一个数在数组中的索引查看全部
-
标准模式和混杂模式下获取页面滚走的距离分别是 document.body.scrollTop 和 document.documentElement.scrollTop查看全部
-
getElementsByClassName方法IE8以下不兼容查看全部
-
JS中的offset可以获取包括padding的高度，但不包括margin的距离查看全部
-
$.inArray(val,arr) 判断值val在arr中出现的索引查看全部
-
outerWidth() = padding+border+width; width() = width查看全部
-
不加载数据的条件：最后一张图片本身高度的一半+这张图片距离父级元素offsetheight的高度>滚动的高度+浏览器可视窗口高度查看全部
-
onscroll事件实现瀑布流布局的图片加载功能： 【原理】 当滚动滚动条时，判断是否要加载新的图片，通过一个函数checkScrollSlide()，返回布尔值。 需要加载的条件： 页面中最后一张图片加载到它本身图片高度一半的时候，开始加载数据。具体计算：(scrollTop+可视宽口高度)>(box[oBox.length-1].offsetTop+Math.floor(oBox[length-1].offsetHeight))时 【知识点】 ①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);插入元素查看全部
-
图片排序：（第二行的第一张图片排列在第一行中高度最矮的那张图片下面） 【原理】第二行的第一个box排在第一行高度最矮的那个下面，第二个排在次矮的那个下面，以此类推。 【要点】 判断输出个数：console.log(hArr); 1、建立存高array ：var hArry=[]; 把i<cols中图片高度压入数组中：hArry.push(oBox[i].offsetHeight); 2.第七张图片加载在前六张中高度最矮的位置下 计算数组中的最小值：var minH=Math.min.apply(null,hArry); 求数组中最小值 Math.min()只能求一组数据的最小值，通过传参，而不是数组。 借助apply()方法，apply用来改变函数中this的指向，这里用来改变Math对象中的this指向 Math.min.apply(null,hArr); 3.定义left 知道高度最小值的索引index function getMinIndex(arr,val){ for(var i in arr){ if(arr[i]==val){ return i; } } } a、oBox[i].style.left=oBox[index].offsetLeft+'px'; b、oBox[i].style.left=oBoxw*index+'px'; 4、定义第七张图片的top、left oBox[i].style.postion='absolute'; oBox[i].style.top=minH+'px'; oBox[i].style.left=oBoxw*index+'px'; oBox[i].style.left=oBox[index].offsetLeft+'px'; 5、解决盒子重叠（因为数组未更新，全部以原先数组来比较） hArry[index]+=oBox[i].offsetHeight;查看全部
-
瀑布流 原理： 数据加载的时候通过绝对定位来找到box的位置，而box的位置又是相对于main来定义的，所以main要用position:relative;来定义 特点： 等宽不等高 HTML中的类： #main、.box、.pic 外层套一个div为.box来设置padding作为pic之间的间隔，不推荐margin。因为获取数据块高度offset().height能够获取padding间距离，而不会获取margin的间距。 box与box之间用padding来去间隔位置，而不用margin查看全部
-
挺好呢查看全部
-
css3实现 主要是用到colum多栏布局属性 知识点： 1、column的浏览器兼容问题，不同内核要写其前缀 2、column-width 和column-count没有必要同时出现 3、column-rule设置栏与栏之间的虚线 4、column-gap设置栏与栏之间的距离 （css3多栏布局的相关属性）查看全部
举报
0/150
提交
取消