学习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. ASP.NET MVC 4 Ajax上传文件

    这两天一直纠结着表单的问题.想在一个表单里实现三个功能: 输入查询条件,点击查询: 导出查询数据: 上传文件: 方法有很多,乱花渐欲迷人眼,尝试了很多,无果.大致说的是,给不同按钮写js代码,在js代 ...

  2. iOS的崩溃和编译错误

    1. Command /bin/sh failed with exit code 127 这是因为mogenerator找不到路径,stackoverflow给出的答案是: If /usr/local ...

  3. mapping 详解5（dynamic mapping）

    概述 在使用 ES 的时,我们不需要事先定义好映射设置就可以直接向索引中导入文档.ES 可以自动实现每个字段的类型检测,并进行 mapping 设置,这个过程就叫动态映射(dynamic mappin ...

  4. asp.net 下OnClientClick的妙用

    一. OnClick是button的服务器端事件 OnClientClick是button的客户端事件 onlick时发生postback,执行后台代码.onclientclick,就是执行javas ...

  5. JobControl管理多job依赖完整示例

    处理 复杂的要求的时候,有时一个mapreduce程序是完成不了的,往往需要多个mapreduce程序,这个时候就要牵扯到各个任务之间的依赖关系,所谓 依赖就是一个MR Job 的处理结果是另外的MR ...

  6. SQL 分组后取最小行号记录

    本示例测试两个表联接查询后,分组并取分组后的最小行号记录 测试表: tb1表结构如下: CREATE TABLE [dbo].[tb1]( ) NOT NULL, ) NULL, ) NULL, CO ...

  7. jQuery 源码分析5: jQuery 基本静态方法（一）

    jQuery在初始化过程中会为自己扩展一些基本的静态方法和属性,以下是jQuery 1.11.3版本 239 ~ 564行间所扩展的静态属性和方法   jQuery.extend({ // 为每个jQ ...

  8. [译]当你在浏览器输入url后发生了什么

    面试题会经常问这个,之前也被问过,回答的不是很好,后来看到百度前端的一篇博客,啰嗦了好多,很么触摸屏都上了..后来看到stackoverflow上的一个回答,比较短. 原文地址:http://stac ...

  9. 利用 css 制作简单的提示框

    在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...

  10. Java 与 Python 的对比

    最近在学习Python, 现在写一个Python程序和Java程序进行对一下比,以此展示各自不同的特点.这个程序的功能是计算([n, m) )之间的闰年.     Python程序如下: def fu ...