网站建设淘宝评价,代刷网站是怎么做的,动漫设计学校,免费建网站样板手机版说明
源代码 1. 瀑布流 出现问题: 设计给的图片不是同一个尺寸大小,因此不能规则的放入到给定的DOM结构中.此时,需要使用瀑布流技术来解决这个问题 解决的思路: 让图片等宽、不等高 核心: 用到了定位
img {position: absolute;left: 最小的索引 * 图片的宽度;top: 最小的图…说明
源代码 1. 瀑布流 出现问题: 设计给的图片不是同一个尺寸大小,因此不能规则的放入到给定的DOM结构中.此时,需要使用瀑布流技术来解决这个问题 解决的思路: 让图片等宽、不等高 核心: 用到了定位
img {position: absolute;left: 最小的索引 * 图片的宽度;top: 最小的图片的高度;
}算法如下:
首先获取浏览器的宽度w,用w除以图片盒子的宽度向下取整记为列数: col利用数组,保存每一列当前的高度如果是第一行,则将图片的高度保存在数组arr中如果不是第一行,取出arr中的最小值和索引,计算出绝对定位的位置.并给图片设置绝对定位
1.1 用到的API
1.1.1 获取当前屏幕的宽度
由于每个图片盒子还有对应的高度,因此获取的时候,还要获取内边距.在jquery中,可以通过$().outerWidth实现
var screenWidth $(window).outerWidth()1.1.2 给DOM元素加css样式
$().css({position: absolute,left: currLeft,top: currTop
})1.1.3 总体代码
总体代码如下:
$(function() {waterFall()
})
function waterFall() {// 获取盒子var box $(.box)// 1. 求出对应得列数// 1.1 得到当前屏幕的宽度var screenWidth $(window).outerWidth()// 1.2 获取每张图片的宽度var boxWidth $(.box).outerWidth()// 1.3 获取当前的列数var col Math.floor(screenWidth / boxWidth)// 2. 创建数组,记录当前列数的高度var arr []for (var i 0; i col; i) {arr.push(0)}// 3. 遍历盒子中的图片$.each(box, function(index, value) {// 得到每一张图片的高度var thisHeight $(this).height()if (index col) {// 如果是第一行将高度的存入数组中.arr[index] thisHeight} else {// 如果不是第一行,找到数组中最小的高度和索引var currMinHeight Math.min.apply(arr, arr)var currMinIndex arr.indexOf(currMinHeight)// 算出距离 左侧/上侧 的距离var currLeft currMinIndex * boxWidthvar currTop currMinHeight// 将当前的图片变为绝对定位,放在盒子中$(this).css({position: absolute,left: currLeft,top: currTop})arr[currMinIndex] currMinHeight thisHeight}})
}
