学习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. 转--object-C 与lua使用wax交互

    [51CTO独家译文]2011年6月的编程语言排行榜Lua语言一军突起,一举进入前十名.这与一年前苹果决定在iOS系统上使用Lua语言密不可分.但是,你了解如何用Lua语言在iOS上开发应用吗?51C ...

  2. FIFO分枝_限界算法

    问题: 检索4-皇后问题的状态空间树如下图的基本过程.(4-皇后问题解空间的树结构,结点按深度优先检索编号)  如果按序扩展这些结点,则下一个E-结点就是结点2.扩展结点2后生成结点3,8和13.利用 ...

  3. JMS简介

    任何一个系统从整体上来看,其实质就是由无数个小的服务或事件(我们可以称之为事务单元)有机地组合起来的.对于系统中任何一个比较复杂的功能,都是通过调用各个独立的事务单元以实现统一的协调运作而实现的.现在 ...

  4. 【linux操作命令】vim

    高级一些的编辑器,都会包含宏功能,vim当然不能缺少了,在vim中使用宏是非常方便的: :qx     开始记录宏,并将结果存入寄存器x q     退出记录模式 @x     播放记录在x寄存器中的 ...

  5. 抽象（abstract）升级版变接口（interface） 继承（extends）升级版叫实现（implements） 升级版啊升级版 接口可以多继承

    Client --------------------------------------------------- public class Client{ public static void m ...

  6. c# xml 解析取值

    //字符串 string result = "<?xml version=\"1.0\" encoding=\"utf-8\"?>< ...

  7. C#面试基础问题

    传入某个属性的set方法的隐含参数的名称是什么? value,它的类型和属性所声名的类型相同. 如何在C#中实现继承? 在类名后加上一个冒号,再加上基类的名称. C#支持多重继承么? 不支持.可以用接 ...

  8. dll不同的调用方式

    LoadLibrary 一般是动态加载DLL时(你并不需要对应的头文件,和LIB) #pragma comment 一般是静态加载DLL时(对应的头文件.DLL,和LIB缺一不可,并且生产的EXE没有 ...

  9. linux启动报错：kernel panic - not attempted to kill init

    系统类型:CentOS 6.4(x64) 启动提示:Kernel panic - not syncing: Attempted to kill init 解决办法: 系统启动的时候,按下‘e’键进入g ...

  10. Linux中Oracle数据库备份还原

    一.备份Oracle数据库 1.使用数据库管理员账户登录 sqlplus system/system@orcl as sysdba; 2.创建备份目录,并指定备份目录(bak_dir)的物理路径 cr ...