学习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. oracle数据库管理员简介、导入数据与导出数据

    数据库管理员: sys和system的权限区别:sys:所有oracle的数据字典的基表和视图都存放在sys用户中,这些基表和视图对于oracle的运行时至关重要的,由数据库 自己维护,任何用户都不能 ...

  2. Android_Menu_PopupMenu

    layout.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" x ...

  3. 开源Web安全测试工具调研

    开源Web安全测试工具调研 http://blog.csdn.net/testing_is_believing/article/details/22302087

  4. css3过度和动画

    一.过度(transition) transition:[transition-property] || [transition-duration] || [transition-timing-fun ...

  5. mvc模式实现

    listdemo.html负责显示,listModel.class.php负责从数据库存储数据和查找数据,mysql.class.php是操作数据库的类,但不直接使用,model类调用mysql,li ...

  6. maven打包技巧

    http://www.infoq.com/cn/news/2011/06/xxb-maven-9-package/ "打包"这个词听起来比较土,比较正式的说法应该是"构建 ...

  7. sharepoint 删除list里的所有内容

    [System.reflection.Assembly]::LoadWithPartialName("Microsoft.SharePoint") $siteUrl = " ...

  8. ASP.NET MVC总结

    一.概述 1.单元测试的NUnit, MBUnit, MSTest, XUnit以及其他的框架 2.ASP.NET MVC 应用的默认目录结构有三个顶层目录: Controllers.Models.V ...

  9. json解析日期方法 问题的解决方案

    之前在做项目的时候发现,用json格式传输日期数据的时候,发现从数据库中传回到页面的数据出现错误,查阅相关资料才知道,原来json不支持日期解析,要自己解决,解决方案也很简单,写一段js代码就OK了- ...

  10. VMWare中安装CentOS6.6不能上网的解决办法

    1.首先在虚拟机中将网络配置设置成NAT 2.在windows系统,我的电脑-管理-服务 中开启VMware NAT service和VMware DHCP service. 3.在CentOS里面打 ...