利用JS实现简单的瀑布流效果

　　哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了, 虽然中间非常的坎坷, 并不是一帆风顺但是最终我还是实现了个简单的效果, 下面就为大家简单的介绍下, 不知道的友友们, 有兴趣的话, 可以来参考下, 欢迎指出缺点和不足!

一.瀑布流之准备工作

　　首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话可以尝试着写下网络的, 不过本地和远端的大致是相同的. 那么我就来简单介绍下本地的瀑布流效果吧, 我们要先准备好八九张图片, 当然啦, 我们实现的是瀑布流效果, 所以最好是高度不相同的, 这样才可以看出来效果, 对吧, 嘿嘿.

二.代码的准备工作

　　我们打开开发工具, 先建个html工程, 在内部写下如下代码, 因为是准备工作, 所以刚开始写的都是一些基础性的东西, 就不一一解释了, 直接上代码:

<body>

<div id="container">

    <div class="box">

        <div class="boximg">

            <img src="img/1.jpeg">

        </div>

    </div>

    <div class="box">

        <div class="boximg">

            <img src="img/2.jpg">

        </div>

    </div>

    <div class="box">

        <div class="boximg">

            <img src="img/3.jpg">

        </div>

    </div>

    <div class="box">

        <div class="boximg">

            <img src="img/4.jpg">

        </div>

    </div>

    <div class="box">

        <div class="boximg">

            <img src="img/5.jpg">

        </div>

    </div>

    <div class="box">

        <div class="boximg">

            <img src="img/6.jpg">

        </div>

    </div>

    <div class="box">

        <div class="boximg">

            <img src="img/7.gif">

        </div>

    </div>

    <div class="box">

        <div class="boximg">

            <img src="img/8.jpg">

        </div>

    </div>

    <div class="box">

        <div class="boximg">

            <img src="img/9.jpg">

        </div>

    </div>

    <div class="box">

        <div class="boximg">

            <img src="img/9.jpg">

        </div>

    </div>

    <div class="box">

        <div class="boximg">

            <img src="img/9.jpg">

        </div>

    </div>

    <div class="box">

        <div class="boximg">

            <img src="img/9.jpg">

        </div>

    </div>

</div>

</body>

　　很明显这段代码中也就是几个div标签和几个img标签, 所以是很简单的, 就不多说了, 下面我们来布置css样式.

三.css样式布置

　　说句比较实在的话, 对于瀑布流而言, 因为我只是简单的模拟下, 所以css样式的定制, 我并没有特别复杂的定制, 只是简单的把边框和容器(div)大小给定制了下, 还有一些颜色, 话不多说, 直接上代码吧

/*使用通配符将内外边距都设置为零, 这样看着好看*/

*{

    margin: 0px;

    padding: 0px;

}

/*将主容器的布局方式设置为相对布局*/

#contianer{

    position: relative;

}

.box{

    padding: 5px;

    float: left;

}

/*将承载图片的容器定制颜色及边框大小和圆角*/

.boximg{

    padding: 5px;

    box-shadow: 0 0 5px #ccc;

    border: 1px solid #cccccc;

    border-radius: 5px;

}

/*定制图片尺寸*/

.boximg img{

    width: 250px;

    height: auto;

}

　　代码中注释已经解释的很清楚了, 就不再过多的赘述了.

四.重点也是瀑布流的难点(JS的实现)

　　大家对于瀑布流都不陌生吧, 它主要是顶宽的, 然后根据高度来进行布局, 也就是说在第一行铺满后, 准备排布第二行的时候, 将第二行的第一种图片放在第一行图片高度最小处, 之后依次类推, 先简单的上些代码, 然后一一作解释了, 正所谓有图有真相, 哈哈!

　　这就是在未编写js代码时的效果图, 那么按道理来说下面的图片应该放在第一行第二张图片的位置下面, 应该充分利用空白资源, 那么这要如何来实现呢, 接下来我就附上代码来告诉大家了:

window.onload = function(){

    waterFlow("container", "box");

}

function waterFlow(parent, chirld){

    var wparent = document.getElementById(parent);//获取父级div, 最外级容器

    var allArr = getAllChirld(wparent,chirld);//获取到所有的class为box的容器div

    var wscreenWidth = document.documentElement.clientWidth;//获取屏幕宽度

    var wchirldWidth = wparent.getElementsByTagName("*");//获取所有的标签

    var num = Math.floor(wscreenWidth/wchirldWidth[0].offsetWidth);//这是一个Math算法, 目的是将小数转变为整数,

    // 从而可以知道每行最多容纳几张图片

    wparent.style.cssText = 'width:'+wchirldWidth[0].offsetWidth*num+'px;margin:0 auto';//固定每行摆放个数 和上下左右边距

    //获得每行的最小高度

    getMinHeightOfCols(allArr, num);

}

function getAllChirld(parent,classname){

    //获取所有的标签

    var wchirld = parent.getElementsByTagName("*");

    //创建数组

    var chirldArr = [];

    //遍历wchirld, 将其中className等于classname(传进来的参数)相同的标签放入数组chirldArr中

    for(var i = 0; i<wchirld.length; i++){

        if(wchirld[i].className==classname){

            //因为是位push所以没放进去一个, 都是在数组的最后一个

            chirldArr.push(wchirld[i]);

        }

    }

    //返回该数组

    return chirldArr;

}

function getMinHeightOfCols(chirdArr, num){

    //创建数组, 用来盛放每一行的高度

    var onlyOneColsArr = [];

    for(var i = 0; i<chirdArr.length; i++){

        if(i<num){

            //num为传进来的参数, 即为每行放图片的张数, 此步骤的目的是为了将第一行每张图片的高度遍历出来存放如新数组

            onlyOneColsArr[i]=chirdArr[i].offsetHeight;

        } else {

            //当大于每行存放的图片个数时进入该方法, Math.min.apply这个方法是为了得到数组中的最小值

            var minHeightOfCols = Math.min.apply(null, onlyOneColsArr);

            //此方法的目的是为了得到最小高度图片的下表, 也就是在每行的第几张, 具体方法见下面

            var minHeightOfindex = getminIndex(onlyOneColsArr, minHeightOfCols);

            //定义布局方式为绝对布局

            chirdArr[i].style.position = "absolute";

            //得到下一行图片应放的高度

            chirdArr[i].style.top = minHeightOfCols + "px";

            //得到下一行图片应放于那个位置

            chirdArr[i].style.left = chirdArr[minHeightOfindex].offsetLeft + "px";

            //将两张图片高度相加得到一个新的高度用来进行下一次的计算

            onlyOneColsArr[minHeightOfindex] += chirdArr[i].offsetHeight;

        }

    }

}

//此方法是为了进行最小高度下标的确定

function getminIndex(onlyOneColsArr, min){

    //遍历传进来的高度数组

        for(var i in onlyOneColsArr){

            //如果高度等于最小高度, 返回i即为该图片下标

            if(onlyOneColsArr[i] == min){

                return i;

            }

        }

}

　　注释已经很清楚了, 如果还有不了解不知道的地方, 欢迎评论留言, 下面就让我们来看下效果图吧, 嘿嘿

五.瀑布流之模拟网络加载

　　写到这里很多人肯定认为已经差不多结束了, 但是我来拓展点小知识吧, 那就是如何实现类似于网络上的无限加载, 下面附上代码吧, 由于时间有点紧张就不做详细的介绍了, 有不懂得欢迎细问:

window.onload = function(){

    waterFlow("container", "box");

    var dataInt={'data':[{'src':'1.jpeg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'},{'src':'6.jpg'},

        {'src':'7.gif'},{'src':'8.jpg'},{'src':'9.jpg'}]};

    window.onscroll=function(){

        if(checkscrollside()){

            var oParent = document.getElementById('container');// 父级对象

            for(var i=0;i<dataInt.data.length;i++){

                var oPin=document.createElement('div'); //添加 元素节点

                oPin.className='box';                   //添加 类名 name属性

                oParent.appendChild(oPin);              //添加 子节点

                var oBox=document.createElement('div');

                oBox.className='boximg';

                oPin.appendChild(oBox);

                var oImg=document.createElement('img');

                oImg.src='./img/'+dataInt.data[i].src;

                oBox.appendChild(oImg);

            }

            waterFlow('container','box');

        };

    }

}

　　由于图片大小限制所以无法给各位带来效果图, 望见谅.

　　好了, 今天的分享就到这里了, 望大家多提意见, 有时间了还会再来, 不懂也可以提问哈, 嘿嘿, 以上就是简单的瀑布流效果, 还不错吧, 加油喽!

利用JS实现简单的瀑布流效果的更多相关文章

使用JS实现图片展示瀑布流效果
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...
js实现的美女瀑布流效果代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
AJAX异步实现简单的瀑布流
传统瀑布流布局ul-li,需要先设定显示几列,每列是一个li,需要左浮动并指定宽度,li里面的布局也要先布局好,主要是要定宽,高度自动:然后通过ajax异步,从数据库中得到数据,遍历后将数据插入最矮的 ...
WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...
手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现什么是瀑布流效果首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
js图片瀑布流效果
要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...
利用LruCache载入网络图片实现图片瀑布流效果(改进版)
PS: 2015年1月20日21:37:27 关于LoadImageAsyncTask和checkAllImageViewVisibility可能有点小bug 改动后的代码请參见升级版本号的代码 ht ...
JS 瀑布流效果
JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
js 实现图片瀑布流效果，可更改配置参数带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果页面需求 1 ...

随机推荐

mybati的存储过程
这里我就以的存储过程为例,大家一起学习一下,
ssh免密码登陆远程服务器
ssh免密码登陆远程服务器在使用windows下的cygwin或者在linux下使用Terminal进行远程服务器登陆测试的时候总是会要求输入账号密码,对于此我们可以使用ssh将公钥放在服务器上的方 ...
Python时间戳和日期
import time localtime=time.strftime("%Y-%m-%d %H:%M:%S", time.localtime(time.time())) prin ...
解决PL/SQL Dev连接Oracle弹出空白提示框
第一次安装Oracle,装在虚拟机中,用PL/SQL Dev连接远程数据库的时候老是弹出空白提示框,网上找了很久,解决方法也很多,可是就是没法解决我这种情况的. 没办法,只能自己研究,经过大概一天时间 ...
NSUserDefaults的使用方法
NSUserDefaults对象是用来保存,恢复应用程序相关的偏好设置,配置数据等等,用户再次打开程序或开机后这些数据仍然存在.默认系统允许应用程序自定义它的行为去迎合用户的喜好.你可以在程序运行的时 ...
Assimp场景模型输出Collada,STL,3DPDF
本文介绍开源库模型的几种输出格式:DAE,STL,3DPDF. Assimp是C++写的,AssimpNet是C#重构其中主要数据结构,并开通Assimp中重要方法的调用接口,为不熟悉C++的码农带来 ...
Spring4分别整合mongo2.X和3.0
1.pom文件添加: <dependency> <groupId>org.mongodb</groupId> <artifactId>mongo-jav ...
jQuery 2.2 和 1.12 新版本发布
新年新气象,jQuery 团队于昨日发布了两个新版本:1.12 和 2.2.这两个版本都包含了大量的Bug修正和功能改进.基本上这会是3.0之前最后一次发布.不过由于3.0不做向下兼容,所以届时 jQ ...
指针与数组、大小端之 printf("%x,%x,%x\n",*(a+1),ptr1[-1],*ptr2);
在X86系统下,以下程序输出的值为多少? #include <stdio.h> #include <stdlib.h> int main(void) { ]={,,,,}; ) ...
Oracle AWR
http://www.linuxidc.com/Linux/2011-10/44563.htm http://t.askmaclean.com/thread-3227-1-1.html http:// ...

利用JS实现简单的瀑布流效果

利用JS实现简单的瀑布流效果的更多相关文章

随机推荐

热门专题