css和js如何实现瀑布流效果

小编给大家分享一下css和js如何实现瀑布流效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

JS是什么

JS是JavaScript的简称，它是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，主要用于web的开发，可以给网站添加各种各样的动态效果，让网页更加美观。

瀑布流效果<div class="wrap">

        <div class="bigbox" id="bigbox">
        <!--每一小块开始-->
            <div class="listbox">
                <div class="listbox-con">
                    <h3>图片介绍和描述</h3>
                    <p>此为介绍和描述</p>
                </div>
            </div>
            <div class="listbox">
                <div class="listbox-con">
                    <h3>图片介绍和描2述</h3>
                    <p>此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述2</p>
                </div>
            </div>
            <div class="listbox">
                <div class="listbox-con">
                    <h3>图片介绍和描3述</h3>
                    <p>此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述3</p>
                </div>
            </div>
            <div class="listbox">
                <div class="listbox-con">
                    <h3>图片介绍和描4述</h3>
                    <p>此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述4</p>
                </div>
            </div>
            <div class="listbox">
                <div class="listbox-con">
                    <h3>图片介绍和描5述</h3>
                    <p>此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述5</p>
                </div>
            </div>
            <div class="listbox">
                <div class="listbox-con">
                    <h3>图片介绍和描述</h3>
                    <p>此为介绍和描述</p>
                </div>
            </div>
            <div class="listbox">
                <div class="listbox-con">
                    <h3>图片介绍和描2述</h3>
                    <p>此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述2</p>
                </div>
            </div>
            <div class="listbox">
                <div class="listbox-con">
                    <h3>图片介绍和描3述</h3>
                    <p>此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述3</p>
                </div>
            </div>
            <div class="listbox">
                <div class="listbox-con">
                    <h3>图片介绍和描4述</h3>
                    <p>此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述4</p>
                </div>
            </div>
            <div class="listbox">
                <div class="listbox-con">
                    <h3>图片介绍和描5述</h3>
                    <p>此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述5</p>
                </div>
            </div>
            
        </div>
    </div>

css样式代码

代码如下:

*{ margin:0px; padding:0px;}
.wrap{ padding:15px;}
.bigbox{ width:100%; position:relative;}
.listbox{ width:23%; padding:1%; position:absolute; box-shadow:0 0 1px #CCC;}
.listbox-con{ background:#fefefe;}
.listbox-con h3{ font-size:16px; color:#333;}
.listbox-con p{ font-size:14px; color:#666;}

插件代码

代码如下:

(function($){
    var defaults ={
        wflist:'.listbox'
    };
    $.fn.waterfal = function(opt){
        opt =$.extend({},defaults,opt);
        // 变量
        var obj = $(this);//当前对象
        
        var wfwidth = $(opt.wflist).outerWidth(true),
        minHeight = 0,
        maxcol=Math.floor($(window).width()/wfwidth);
        
        (function(wflist,maxcol,wfwidth,minHeight){
            var wfarr = new Array(),minHeight = 0,minCol=0;
            
            for(i=0;i<wflist.length;i++){
                colHeight=wflist.eq(i).outerHeight(true);
                if(i<maxcol){
                    wfarr[i] = colHeight;
                    wflist.eq(i).css({'top':0,left:i*wfwidth});
                }else{
                    minHeight=Math.min.apply(null,wfarr);//
                    minCol = getArrayKey(wfarr, minHeight);
                    wfarr[minCol] += colHeight; //加上新高度后更新高度值
                    wflist.eq(i).css({"top":minHeight,left:minCol * wfwidth}); //先得到高度最小的Li，然后把接下来的li放到它的下面                
                }
                wflist.eq(i).attr('id',"post_"+i);                
            };
        })( $(opt.wflist),maxcol,wfwidth,minHeight);
        
        function getArrayKey(wfa,minh){//使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个)
            for( ind in wfa ) {
                if( wfa[ind] == minh)  {
                    return ind;
                }
            }
        };
        var wfAreaH = parseInt( $(opt.wflist).last().css("top")) + $(opt.wflist).last().outerHeight(true)+ "px"; //显示区域的高度为 最后一个元素的Top值+自身高度
        obj.css({ "width":wfwidth * maxcol,"height":wfAreaH }); //设置显示区域宽度和高度    
    }
})(jQuery);

以上是“css和js如何实现瀑布流效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！