用原生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】图片瀑布流实现
瀑布流就是像瀑布一样的网站——丰富的网站内容,特别是绚美的图片会让你流连忘返.你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前.瀑布流网站是新兴的一种网站模式——她的 ...
随机推荐
- 基础：c++中引用与java中的引用
using namespace std; class Point { public: double x; double y; Point(){} void setPoint(double x,doub ...
- JavaScript高级程序设计（第三版）学习笔记13、14章
第13章,事件 事件冒泡 IE的事件叫做事件冒泡:由具体到不具体 <!DOCTYPE html> <html> <head> <title>E ...
- 通过公网连接云数据库Memcache--ECS Windows篇
目前云数据库Memcache是需要通过ECS的内网进行连接访问,如果用户本地需要通过公网访问云数据库Memcache,可以在ECS Windows云服务器中通过netsh进行端口映射实现. 一.搭建要 ...
- Effective C++ 沉思录
1.视C++是一个联邦语言.由C,Object-Oriented C++,Templete C++,和STL组成.其中面对不同的语言,采用不同的规约这样编程效率会提高很多.例如C和STL 都是有C-S ...
- ie编程半天的学习总结
自己好久没有来这个博客了,自己陆续去几个地方写博客,一个c++博客园,一个csdn. 感觉都一般吧,看不到什么好的博客,可能自己没有看到吧.以后就在这个博客记录一点技术笔记吧!自己比较懒,只要做为记录 ...
- serialize
Jquery的serialize()方法用于将表单元素转换为查询字符串格式, Submit按钮及File选择元素是不能序列化的. $('input:button').click(function() ...
- C#程序员整理的Unity 3D笔记（十）：Unity3D的位移、旋转的3D数学模型
遇到一个想做的功能,但是实现不了,核心原因是因为对U3D的3D数学概念没有灵活吃透.故再次系统学习之—第三次学习3D数学. 本次,希望实现的功能很简单: 如在小地图中,希望可以动态画出Player当前 ...
- 12天学好C语言——记录我的C语言学习之路（Day 7）
12天学好C语言--记录我的C语言学习之路 Day 7: 昨天进行了一天的数组学习,今天大家可以先写几个昨天的程序热热身,回顾回顾,然后今天第一个新程序也是关于数组的,比较难,准备好就开始啦! //输 ...
- ASP.NET 常识
1..NET是什么? .Net全称.NET Framework是一个开发和运行环境, 该战略是微软的一项全新创意, 它将使得"互联网行业进入一 ...
- 05_XML的解析_01_dom4j 解析
[简述] Xml文件出了给开发者看,更多情况使用程序读取xml文件里的内容,这叫做xml解析. 根据解析方式分为:DOM解析 和 SAX解析 [解析工具] (一). 使用DOM解析原理的工具: 1.J ...