学习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实现图片瀑布流的浏览效果的更多相关文章

  1. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  2. 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  3. 利用LruCache载入网络图片实现图片瀑布流效果(改进版)

    PS: 2015年1月20日21:37:27 关于LoadImageAsyncTask和checkAllImageViewVisibility可能有点小bug 改动后的代码请參见升级版本号的代码 ht ...

  4. 图片瀑布流，so easy！

    什么是图片瀑布流 用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子: 简单来说,就是有很多图片平铺在页面上,每张图片的宽度相同,但是高度不同,这样错落有致的排列出 n 列的样子很像瀑布,于是就有 ...

  5. Jquery实现图片瀑布流思路-简单版

    目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...

  6. js图片瀑布流效果

    要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...

  7. 基于.NetCore开发博客项目 StarBlog - (10) 图片瀑布流

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  8. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  9. 【Javascript Demo】图片瀑布流实现

    瀑布流就是像瀑布一样的网站——丰富的网站内容,特别是绚美的图片会让你流连忘返.你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前.瀑布流网站是新兴的一种网站模式——她的 ...

随机推荐

  1. [转].net连oracle的问题及方法折腾总结 连接字串

    本文转自:http://www.th7.cn/Program/net/201305/138265.shtml 对oracle不算熟,对.net结合oracle开发项目也只做过一个.最近换了新电脑,装了 ...

  2. centos vim 中文乱码解决方案

    1.安装中文包:yum -y groupinstall chinese-support   2.修改字符编码配置文件 vi /etc/sysconfig/i18n LANGUAGE="zh_ ...

  3. 读jQuery官方文档：数据方法与辅助方法

    数据方法 有时候你可能想要在元素上面储存数据.由于浏览器兼容性问题,用原生JavaScript处理元素上的数据可能会造成内存溢出,jQuery可以帮你自动处理这些问题: //储存和取出元素数据 $(' ...

  4. 【JavaScript权威指南(第五版)】笔记之第二部分 客户端JavaScript 第13章~第23章

    第十三章 Web浏览器中的javascript ①   eg:下面两行代码实际上执行的是相同的功能 var answer = 42; window.answer = 42;   ③每个window对象 ...

  5. Android带头像的用户注册页面

    详细的图文可以到我的百度经验去查看:http://jingyan.baidu.com/article/cd4c2979eda109756e6e60de.html 首先是注册页面的布局: <?xm ...

  6. mybatis 无法转换为内部表示 解决

    出现这个问题,一般是JavaBean定义的时候数据类型不准造成的. 其中javabean定义的字段的类型并不需要完全和数据库中的字段一样. 在mapper.xml中可能做了转换  比如 CASE WH ...

  7. 九度OJ 1283 第一个只出现一次的字符

    题目地址:http://ac.jobdu.com/problem.php?pid=1283 题目描述: 在一个字符串(1<=字符串长度<=10000,全部由大写字母组成)中找到第一个只出现 ...

  8. java 中hashcode和equals 总结

    一.概述            在Java中hashCode的实现总是伴随着equals,他们是紧密配合的,你要是自己设计了其中一个,就要设计另外一个.当然在多数情况下,这两个方法是不用我们考虑的,直 ...

  9. 实习笔记-3：ef实体操作错误篇

    学习笔记 1.json序列化ef实体是报错:“序列化类型为“System.Data.Entity.DynamicProxies.XXXX.... 对象时检测到循环引用.” 公司里用ef来生成实体.但是 ...

  10. Raphael：JS矢量图形库

    Raphael:JS矢量图形库 2016-08-29 http://dmitrybaranovskiy.github.io/raphael/