用原生JavaScript实现图片瀑布流的浏览效果
学习JS，活跃思维，灵活运用的一个较为典型的学习案例。同一个瀑布流的效果但实现方式却很多，利用递归、冒泡等等手法都可以达到你想要的目的。这次要说的就是利用类似递归来实现此效果的原创方案。此方案个人认为难度系数较低
<?php
//没有数据源,利用遍历对应文件夹中的所有的图片得到的数组模拟成数据源
$arr = array();
$dir = @opendir('images');
while($file = @readdir($dir)){
if($file == '.' || $file == '..'){
continue;
}
$arr[] = $file;
}
@closedir($dir);
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>瀑布流</title>
<style type="text/css">
*{padding:0;margin:0}
.box{padding:5px;float:left;}
.image{padding:5px;border:1px solid #ccc;box-shadow: 0 0 5px #ccc;border-radius:5px;}
.image img{width:150px;height:auto;}
</style>
</head>
<body>
<div id="container" style="">
<?php foreach($arr as $val):?>
<div class="box">
<div class="image">
<img src="data:images/<?php echo $val?>" />
</div>
</div>
<?php endforeach;?>
</div>
</body>
<script>
window.onload = function(){
imgLocation('container','box');
}
window.onresize = function(){
imgLocation('container','box');
}
function imgLocation(parent,content){
//取得大盒子的节点对象
var cparent = document.getElementById(parent);
//从大盒子中找到所有放图片的盒子
var ccontent = getChildElement(cparent,content);
//由于CSS已经规定所有Img的宽度为150,所以这边返回的图片盒子的宽度就是150+5*2+5*2+2 = 172;
var imgWidth = ccontent[0].offsetWidth;
//利用body体宽度和图片盒子所在宽度两者相除得到目前宽度下第一排能摆放的最大个数
var cols = Math.floor(document.documentElement.clientWidth / imgWidth);
//利用计算出来的一排最多的个数乘以每个图片的宽度得到大盒子应有的宽度
cparent.style.cssText = 'width:'+imgWidth*cols+'px;margin:0 auto;';
console.log(cols);
//定义用于存放第一排图片盒子的高度所用的数组
var BoxHeightArr = [];
//循环遍历所有图片盒子
for(var i=0;i<ccontent.length;i++){
//利用i的自增获取第一排所有盒子的高度（这里设计的很巧妙哦）
if(i<cols){
//将第一排所有盒子的高度追加到之前定义的数组
BoxHeightArr[i] = ccontent[i].offsetHeight;
//并且把第一排盒子所有的绝对定位去掉,不然在实时拉伸窗口的时候会破坏自适应
ccontent[i].style.position = '';
}else{
//循环完第一排时利用取到的高度数组从中获取到最小高度
var minHeight = Math.min.apply(null,BoxHeightArr);
//自定义函数取得最小高度所在的盒子的位置(下标)
var minIndex = getminHeightLocation(BoxHeightArr,minHeight);
//修改第二排开始摆放的CSS，盒子定位修改成绝对定位,为后面的移动最准备
ccontent[i].style.position = 'absolute';
//把当前循环盒子的Y坐标修改成最小盒子的高度（这样就可以让当前盒子排在第一排最小盒子的下面）
ccontent[i].style.top = minHeight + 'px';
//把当前循环盒子的X坐标修改成最小盒子所在位置的X坐标（达到对齐效果）
ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px';
//当本轮循环的修改操作全部完成后,更新第一排盒子高度的数组里的最小高度
//现在最小盒子的高度应该是之前的高度加上第二排追加上来的盒子的高度
//以此循环操作所有的盒子就能实现瀑布流的效果
BoxHeightArr[minIndex] = BoxHeightArr[minIndex]+ccontent[i].offsetHeight;
}
}
}
//以下开始是辅助部分，不一一赘述，上面是实现的核心，原理已经一一道明
function getChildElement(parent,content){
var contentArr = [];
var allcontent = parent.getElementsByTagName('*');
for(var i=0;i<allcontent.length;i++){
if(allcontent[i].className == content){
contentArr.push(allcontent[i]);
}
}
return contentArr;
} function getminHeightLocation(BoxHeightArr,minHeight){
for(var i=0;i<BoxHeightArr.length;i++){
if(BoxHeightArr[i] == minHeight){
return i;
}
} } </script>
</html>
效果展示：
用原生JavaScript实现图片瀑布流的浏览效果的更多相关文章
- js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...
- 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- 利用LruCache载入网络图片实现图片瀑布流效果(改进版)
PS: 2015年1月20日21:37:27 关于LoadImageAsyncTask和checkAllImageViewVisibility可能有点小bug 改动后的代码请參见升级版本号的代码 ht ...
- 图片瀑布流，so easy！
什么是图片瀑布流 用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子: 简单来说,就是有很多图片平铺在页面上,每张图片的宽度相同,但是高度不同,这样错落有致的排列出 n 列的样子很像瀑布,于是就有 ...
- Jquery实现图片瀑布流思路-简单版
目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...
- js图片瀑布流效果
要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...
- 基于.NetCore开发博客项目 StarBlog - (10) 图片瀑布流
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% // ...
- 【Javascript Demo】图片瀑布流实现
瀑布流就是像瀑布一样的网站——丰富的网站内容,特别是绚美的图片会让你流连忘返.你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前.瀑布流网站是新兴的一种网站模式——她的 ...
随机推荐
- Android开发环境搭建完全图解（转）
本文介绍从0开始,在Linux系统下,搭建一个Android开发环境的方法. 如果你是<Learning Android>这本书的读者,你也可以参考这篇文章,因为这篇文章是以书中的安装方法 ...
- C语言枚举
应该是 各种语言都支持枚举的. 所以这个 之前在我们java案例里面就出现过的季节代码再次出现了. 枚举帮我们起到一个变量值,在某一范围内的限定,用来避免一些非法值的键入. 值得注意的是,这里面的枚举 ...
- posix thread条件变量
概述 等待条件变量总是返回锁住的互斥量. 条件变量的作用是发送信号,而不是互斥. 与条件变量相关的共享数据是“谓词”,如队列满或队列空条件. 一个条件变量应该与一个谓词相关.如果一个条件变量与多个谓词 ...
- Makefile的规则
在讲述这个Makefile之前,还是让我们先来粗略地看一看Makefile的规则:最基本的编写规则的方法是从最终的源程序文件一个一个的查看源码文件.把它们要生成的目标文件作为目标,而C语言源码文件和源 ...
- PHP之文件的锁定、上传与下载
小结文件的锁定机制.上传和下载 1.文件锁定 现在都在讲究什么分布式.并发等,实际上文件的操作也是并发的,在网络环境下,多个用户在同一时刻访问页面,对同一服务器上的同一文件进行着读取,如果,这个用户刚 ...
- Android调用系统相机以及自定义相机
0.综述 自定义相机,此处展示简单的相机功能,官方文档中还有相应关于视频拍摄的内容,此处不提 1.添加权限 <!--相机权限,数据存储--> <uses-permission and ...
- js中的FileSystemObject使用（FSO）
Set fso = Server.CreateObject("Scripting.FileSystemObject") 定义FSO对象 fso.CreateFolder(Serve ...
- Easyui tabs的herf和content属性
在backstage.jsp页面中我写了一个方法,用于在指定位置添加面板(id为msg的地方)function addTab(t,h){ if($('#msg').tabs('exists',t)){ ...
- 【html】【9】div布局[div层叠]
让DIV重叠并按想要顺序重叠需要CSS来实现,即CSS绝对定位进行实现. 重叠样式需要主要CSS样式解释1.z-index 重叠顺序属性2.position:relative和position:abs ...
- XML, XPath, Xslt及解析/Parse
XML及解析/Parse "Programming with libxml2 is like the thrilling embrace of an exotic stranger.&quo ...