说明

源代码

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}})
}

javascript --- 瀑布流的实现相关推荐

javascript瀑布流效果
javascript瀑布流效果其实javascript瀑布流前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...
java页面展示流式图片,javascript瀑布流式图片懒加载实例解析与优化
之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒 ...
JavaScript 瀑布流简单实现(基于Jquery)
HTML代码片段 <div class="main"><div class="main-items"><div class=&qu ...
javascript瀑布流（照片墙）
一个小白的开始~ html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
网页瀑布流效果实现的几种方式
前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb i ...
jQuery图片瀑布流demo效果示例（整理）jQuery瀑布流效果
效果图: <!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8& ...
JavaScript实现自适应宽度的瀑布流
摘要: 主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和json是滚动 ...
JavaScript——原生js实现瀑布流
瀑布流介绍及实现原理: 瀑布流是一种页面布局,页面上也有多等宽的块(块就页面内容),每一块都是绝对定位(absolute),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道, ...
流式布局之javascript实现照片瀑布流以及Macy.js插件实现瀑布流
文章目录瀑布流的定义一.实现效果代码首先是用javascript自己手写代码实现照片瀑布流使用插件Mary.js照片流插件实现照片瀑布流总结瀑布流的定义瀑布流是什么? 1.琳琅满目:整 ...

javascript --- 瀑布流的实现

说明

1. 瀑布流

1.1 用到的API

1.1.1 获取当前屏幕的宽度

1.1.2 给DOM元素加css样式

1.1.3 总体代码

javascript --- 瀑布流的实现相关推荐

最新文章

热门文章