正文

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

true-love  2022-02-17  457

关键词：

一.瀑布流之准备工作

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

二.代码的准备工作

　　我们打开开发工具, 先建个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');
        };
    }
}

wpf下制作的简单瀑布流效果(代码片段)

...就搬到了WPF,下面是界面我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单.1.最重要的就是每个子项的顺序填充,我是把界面看做N列,然后在每列里依次加载子项.最后结果就是,界面放一个Unifor... 查看详情

js实现瀑布流效果

Js实现瀑布流效果通过JavaScript实现瀑布流效果，实现不同大小的图片有序展示效果图：思路：1.将图片宽度固定，用浏览器窗口大小除以每个图片的宽度，求出要分成的列数2.将每个图片定位3.每次找到最小高度的列，将图片加到... 查看详情

js实现瀑布流以及加载效果

一、瀑布流是个啥？　　瀑布流，是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。　　最早采用瀑布流布局的网站是Pinterest，逐渐... 查看详情

flex布局实现瀑布流排版(代码片段)

网上有很多有关js（jq）实现瀑布流和有关瀑布流的插件很多，例如：插件（Masonry，Wookmark等等）。按照正常的逻辑思维，瀑布流的排版（item列表）一般都是由左到右，上而下排序的结果，单纯的css实现这一点有些困难，下面分... 查看详情

js实现瀑布流加载图片效果

今天学习了一个瀑布流加载效果，很多网站都有瀑布流效果，瀑布流就是很多产品显示在网页上，宽相同，高度不同，表现为多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。... 查看详情

简单实现加载图片的瀑布流效果

代码很简单，没有注释<styletype="text/css">*{margin:0px;padding:0px;}#container{position:relative;}.box{padding:5px;float:left;}.box_img{padding:5px;border:1pxsolid#CCC;box-shadow:005px#CCC;border-radius:5 查看详情

玩转masonryjs库来实现瀑布流web效果

...活性。就按照PinterestAndroid/IOS和花瓣MobileWebApp的目标开始实现。第一天的成果是完成了基本的查看详情

在鸿蒙中实现类似瀑布流效果

简介　　鸿蒙OS开发SDK中对于长列表的实现ListContainer的实现较为简单，没法想RecyclerView一样通过使用不同的LayoutManager来实现复杂布局因此没法快速实现瀑布流效果。　　但鸿蒙OS也都支持控件的Measure（onEstimateSize），layout（onArra... 查看详情

js实现瀑布流

下午查找了瀑布流的相关原理，找了一些css3实现的还有js实现的，最后总结了一些比较简单的，易懂的整理起来1.css3实现只要运用到 column-count分列　　　　　　column-width固定宽度　　　　　　column-gap设置列间的间隔　... 查看详情

前端用jquery实现瀑布流效果

jQuery实现瀑布流效果何为瀑布流：　　瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布... 查看详情

wordpress制作照片瀑布流的效果，如何实现？

...果，引入正确文件，php返回正确的图片集和路径，就可以实现的wordpress有瀑布流主题：PhotoBroad主题，可以直接改主题，少量或者不去改代码的参考技术C直接找wordpress的瀑布流模版不成吗，很多网站发布这种模版，感觉效果一般... 查看详情

javascript的瀑布流效果的详解及实现(代码片段)

...流的举例百度图片：http://image.baidu.com四、瀑布流的JS实现：1、设计思路：要想完成一个页面的瀑布流效果需要完成以下三个效果：1）实现一行中图片的个数固定：一行图片的个数=窗口宽度/图片的固定... 查看详情

jquery实现无限滚动瀑布流实现原理

现在类似于pinterest这类的表现效果很火，其实我比较中意的是他的布局效果，而不是那种瀑布流。虽然我不是特别喜欢这种瀑布流的表现样式，但是还是写了几篇关于无限滚动瀑布流效果的文章，Infinitescroll+Masonry=无限滚动瀑布... 查看详情

使用recyclerview实现瀑布流的效果

主函数:publicclassMainActivityextendsAppCompatActivity{privateRecyclerViewrecyclerView;privateList<String>dataList=newArrayList<String>();@OverrideprotectedvoidonCreate(BundlesavedInstanceSta 查看详情

iosuitableview实现的瀑布流效果(代码片段)

...间看了一些关于瀑布流的文章。有些是使用UICollectionView实现的有些是使用UItableView实现的。两种方法都试验过，最后还是觉得使用UItableView实现的效果要好一些。工程源码：点击打开链接 https://github.com/zhuming3834/UITableView-... 查看详情

dreamweaver怎么实现瀑布流

...而瀑布流是靠语言写出来的程序效果，dreamweaver不会帮你实现复杂的应用程序，二者的关系你应该搞明白。其次，瀑布流可以自己编写，javascript加其它动态语言（phpaspjsp等等），结合ajax实现的，自己写稍显复杂最后，如果你会ph... 查看详情

纯csscolumn布局实现瀑布流效果

原理CSSproperty:columns。CSS属性columns用来设置元素的列宽和列数。兼容性chrome50+IE10+androidbrowser2.1+with-webkit-MDN文档效果代码<divclass="wrap"><divclass="item"><divclass="item_content 查看详情

使用css实现瀑布流效果

CSS实现瀑布流特点：不需要计算，浏览器自动计算，只需设置列宽，性能高；列宽随着浏览器窗口大小进行改变，用户体验不好；图片排序按照垂直顺序排列，打乱图片显示顺序；源代码：html.html:使用列表ul、li引入图片<!DOCTY... 查看详情