学习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. try{return} finally

    今天去逛论坛 时发现了一个很有趣的问题: 谁能给我我解释一下这段程序的结果为什么是:2.而不是:3? 代码如下: class Test { public int aaa() { int x = 1; ...

  2. Ubuntu 14.04 & ant: Unable to locate tools.jar. Expected to find it in /usr/lib/jvm/java-7-openjdk-i386/lib/tools.jar

    当我在vagrant + ubuntu 14.04,jenkins ant执行项目的build.xml时,提示: [workspace] $ ant -file build.xml Unable to ...

  3. h2database源码浅析：TransactionMap、MVMap、MVStore

    TransactionStore:A store that supports concurrent MVCC read-committed transactions. TransactionStore ...

  4. Java简单算法--求100以内素数

    package cn.magicdu.algorithm; /** * 打印素数 * * @author xiaoduc * */ public class Prim { public static ...

  5. Error:(6, 0) No such property: outputDir for class: org.gradle.api.internal.project.DefaultProject_Decorated

    在学习greenDao过程中build.gradle文件中出现这个错误,找了半天不知道为什么.代码我是在git上下载的Demo,按理说应该是没问题的.到最后发现缺少了一个关键字Def // 这样有问题 ...

  6. 基于游标的定位DELETE/UPDATE语句

    如果游标是可更新的(也就是说,在定义游标语句中不包括Read Only 参数),就可以用游标从游标数据的源表中DELETE/UPDATE行,即DELETE/UPDATE基于游标指针的当前位置的操作: ...

  7. ASP.NET 5 初识

    ASP.NET 5 是一个跨平台的全新框架,不再依赖IIS.下面介绍一下简单的Hello World 例子. 1. 安装kvm 用管理员权限打开cmd .如下图: 执行如下的脚本: @powershe ...

  8. 判断手机还是PC浏览器

    function goPAGE() { if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobi ...

  9. lucene4.0 基于smb文件服务器的全文检索

    使用lucene 4.0版本的全文检索 所需要的jar包  网速太慢,下次有空再把jar传上来 1.FileIndex  建立索引,查询,删除,更新 package com.strongit.tool ...

  10. C++(指针）

    指针在编程中有时很重要的作用 我们可以用它完成一些看似不可能完成的任务 #include<iostream>using namespace std;void square(int *n){ ...