原生js瀑布流效果，css+html+js，复制下来可直接使用

本文链接：https://blog.csdn.net/Y159357666/article/details/124304765

html里面总共需要引入三个文件

css文件两个，js代码一个；；；json文件里面的图片就自己增改把

html页面

<div class="container" id="fallsBox">
        <div class="column">
            <!-- <div class="item">
                <a href="">
                    <div class="pic-box" style="height: 300px;">
                        <img src="images/10.jpg" alt="">
                    </div>
                    <p class="desc-box"> </p>
                </a>
            </div> -->
        </div>
        <div class="column"></div>
        <div class="column"></div>
    </div>
    <div class="loadMoreBox">别划了,没有了</div>

css页面

html,
body {
    min-height: 100%;
    background: #D6D7DB;
    overflow-x: hidden;
}

.container {
    box-sizing: border-box;
    margin: 20px auto;
    width: 760px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.container .column {
    width: 240px;
}

.container .column .item {
    margin-bottom: 10px;
    padding: 5px;
    background: #FFF;
    box-shadow: 3px 3px 10px 0 #222;
}

.container .column .item a {
    display: block;
}

.container .column .item .pic-box {
    /* 
    height: ; 
    盒子的高度是由图片高度决定的，而且在最开始没有加载真实图片的时候，盒子的高度也要是最后真实渲染图片的高度「动态处理」
    */
    background: #F4F4F4;
}

.container .column .item .pic-box img {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .3s ease;
}

.container .column .item .desc-box {
    margin-top: 5px;
    color: #000;
    font-size: 12px;
    line-height: 20px;
}

.loadMoreBox {
    display: none;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    color: #999;
    background: transparent;
}

需要引入到html里面的css，建议创建一个css文件

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,button,input,textarea,th,td{margin:0;padding:0}body{font-size:12px;font-style:normal;font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif}small{font-size:12px}h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}h4,h5,h6{font-size:100%}ul,ol{list-style:none}a{text-decoration:none;background-color:transparent}a:hover,a:active{outline-width:0;text-decoration:none}table{border-collapse:collapse;border-spacing:0}hr{border:0;height:1px}img{border-style:none}img:not([src]){display:none}svg:not(:root){overflow:hidden}html{-webkit-touch-callout:none;-webkit-text-size-adjust:100%}input,textarea,button,a{-webkit-tap-highlight-color:rgba(0,0,0,0)}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]),video:not([controls]){display:none;height:0}progress{vertical-align:baseline}mark{background-color:#ff0;color:#000}sub,sup{position:relative;