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如何實現瀑布流效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！