-
瀑布流的原理在于：利用绝对定位固定图片位置，图片等宽不等高。新东西：图片阴影（box-shadow）、圆角（border-radius）、用padding与margin的微妙区别。 设置边距使用padding而不是用margin，是因为offsetHight获取的高度包括padding 圆角：border-redius：5px；设置四个角为圆角，该值越大越趋向于圆形 阴影：box-shadow：水平 垂直 模糊程度 颜色；查看全部
-
实现瀑布流布局的三种方法： js原生方法 jquery方法 css3的多栏布局。查看全部
-
style.csstext查看全部
-
Math.min.apply(null,arryname); 获取数组中的最小值查看全部
-
123查看全部
-
- obj.style.cssText ="",以字符串的形式设置多个样式查看全部
-
瀑布流采用的主要是定位 offse获取的高度不包括margin，包括padding查看全部
-
瀑布流布局实现的三种方法 1.JavaScript原声方法 2.jQuery方法 3.css3的多栏布局查看全部
-
使用animate自定义动画查看全部
-
JS实现的瀑布流效果和CSS3实现的瀑布流效果比较: 1、JS方式 1-1、需要计算，列数=浏览器窗口宽度/图片宽度，图片定位是根据每一列数据块的高度计算接下来的图片的位置 1-2、图片排序是按照图片计算的位置横向排列，位置是计算出来的，比较规范 2、CSS方式 2-1、不需要计算，浏览器会自动计算列数，只需要设置列宽，性能高 2-2、列宽随着浏览器窗口大小进行改变，用户体验不好 2-3、图片顺序按照垂直顺序排列，打乱图片显示顺序 2-4、拖到滚动条加载图片还是依靠JavaScript或JQuery来实现查看全部
-
【原理】css3多栏布局column 【知识点】 ①column的浏览器兼容问题，不同内核要写其前缀 -webkit Google浏览器内核 -ms IE -o 欧朋opera -moz 火狐FireFox ②column-width 和column-count没有必要同时出现 ③column-rule设置列与列之间的边框 ④column-gap 设置列间距，不一定定义多少，实际就显示多少。其计算规则：用当前浏览器宽口宽除以定义的列宽，剩下的距离平均分配查看全部
-
可以重现写一个查看全部
-
啊啊啊啊啊啊啊啊啊查看全部
-
瀑布流布局----JavaScript实现瀑布流布局中图片排序 【原理】用一个数组存放每列的高度,当有新的图片加进来时,新图片总是加在列高最小的那一列,新图片加进来后,数组中相应的列的高度也相应增加. 【要点】 1.求数组中最小值 Math.min()只能求一组数据的最小值，通过传参数列表，而不是数组。 借助apply()方法,1.将数组转换为参数列表，2.改变函数中this的指向(本节课用不到此功能) Math.min.apply(null,hArr); 2.求最小值在数组中的索引 封装函数getIndex 3.图片定位(两种方法) position:absolute; top:minH+’px’; 1).left:oBoxW*index+’px’; 2).left:oBoxs[index].offsetLeft+’px’; 4.存放offsetHeight的数组值hArr要不断更改 在每次加入新图片后，最小高度的box加上定位在其下的box的offsetHeight ；即：hArr[index]+=oBoxs[i].offsetHeight;查看全部
-
JS功能的实现： obj.style.cssText ="",以字符串的形式设置多个样式 #main一开始沒有设置宽度, 浏览器大小有变化, #main也就会跟着变化, 而列数就会变化, 所以要给#main设置固定查看全部
举报
0/150
提交
取消