原生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;
            }
        }
}

原文地址:https://www.cnblogs.com/CaseyWei/p/9478895.html

时间: 2024-10-12 06:50:00

原生JS实现瀑布流布局的相关文章

原生JS实现瀑布流

浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.比如下面图片的效果,就是一个典型的瀑布流. 网上有很多JQ的瀑布流插件,而且都写好了兼容,都可以尝试去使用,这里只是跟大家分享一下原生js实现瀑布流的效果,一起学习. 一步一步来: 首先新建一个文件,就叫瀑布流.html吧. <!doctype html> <html

纯js实现瀑布流布局及ajax动态新增数据

本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax模拟数据图片后,是将整个页面的所有图片都重新定位一次. 3. 程序是等所有图片加载完成后再读取图片的尺寸,实际中肯定不能这样做. 4. 实际项目中,应该由后台程序给出图片尺寸值,在js代码中直接使用图片的width属性. 本程序思路: html结构: ? 1 2 3 4 5 6 7 8 9 10 1

JS原生方法实现瀑布流布局

html部分(图片都是本地,自己需要改动图片) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #d74200 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; col

js实现瀑布流布局

window.onload = function () { var d1 = new Waterfall(); d1.init();};//构造函数function Waterfall() { this.oColNum =null;//显示列数 this.oData = null; //存储请求数据 this.settings ={ width:300, autoLoad:true }}//初始化方法Waterfall.prototype.init = function (opt) { exte

10几款网站瀑布流布局图片无限加载动效

jQuery选项卡形式图片瀑布流布局选项卡切换效果代码 jquery masonry瀑布流插件制作图片瀑布流布局代码 原生js简单瀑布流图片无限加载带鼠标悬停图片遮罩效果 jquery masonry瀑布流插件制作图片瀑布流布局代码 jquery柔韧性的图片滑动瀑布流布局 jquery时间轴插件文字图片瀑布流布局时间轴特效(不兼容IE678) modernizr html5图片预加载瀑布流布局鼠标悬停动画效果代码 jquery.waterfall.js自动底部填充对齐的瀑布流布局代码 jquer

移动端三合一瀑布流插件(原生JS)

没有前言,先上DEMO(手机上看效果更佳)和 原码. 瀑布流形式的图片布局方式在手机等移动端设备上运用广泛,比较常见的是下面前两种: 一.等宽等高 这种形式实现起来非常容易,这里就不再多说. 二.等宽不等高 这种形式算是比较正统的瀑布流布局形式,关于如何实现的请参考之前的一篇博文——jQuery瀑布流详解. 三.等高不等宽 在之前的工作中接触到了这种形式的瀑布流,它的主要特点是:同一行的两张图片高度相等,宽度不等,且宽高比与原图近乎一致(没有拉伸变形).但是不同行的图片高度不一定相等,下面就介绍

比较容易理解的---原生js瀑布流

最近一直在恶补基础JS H5 CSS3的基础知识 关于这个瀑布流: 本来打算看着教程来做的. 不过 感觉理解起来有点复杂. SO, 自己参考教程默写了一个.. 目前我所接触过的瀑布流布局分为2大类 主要区分在于 float布局 或者position布局 点击这里下载Demo 贴下源码:(可能有些BUG,没有具体测试) 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

JS瀑布流布局模式(1)

在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容较多且不固定时,就依赖于html结构的顺序,非常受限制.这里给了一个简单的例子,只要传入列表的数量和宽度,就可以动态的将数据放到对应的列里. 原理 1.定义两个容器,一个是存放内容,一个是要展示的列表. 2.将每列的offsetHeight存入一个数组里,比较得出最小的那一列,然后把数据放到最小的列

原生 JS 实现一个瀑布流插件

瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探索之旅. 基础功能实现 首先我们定义好一个有 20 张图片的容器, <body> <style> #waterfall { position: relative; } .waterfall-box { float: left; width: 200px; } </style> </body>