masonry瀑布流 實作

 masonry下載網址 : https://masonry.desandro.com/

有加上Bootstrap的card , 所以記得要引入Bootstrap

HTML:

<div class="grid">
    <div class="grid-item">
        <div class="card" style="width:300px;">
          <img class="card-img-top" src="https://image.shutterstock.com/image-photo/beautiful-cat-isolated-on-white-600w-344690936.jpg" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
    </div>
    <div class="grid-item grid-item--width2"><div class="card" style="width: 300px;">
          <img class="card-img-top" src="https://previews.123rf.com/images/belchonock/belchonock1803/belchonock180336941/97426016-cute-cat-on-white-background.jpg" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
    </div>
    <div class="grid-item"><div class="card" style="width: 300px;">
          <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQuy6s8PA1qS0dFkLFCjvUY_O76t6xqMJPKNw&usqp=CAU" alt="Card image cap">
          <div class="card-body">https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQuy6s8PA1qS0dFkLFCjvUY_O76t6xqMJPKNw&usqp=CAU
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
    </div>
    <div class="grid-item"><div class="card" style="width: 300px;">
          <img class="card-img-top" src="https://media.karousell.com/media/photos/products/2015/12/29/_cat379_1451401179_2f4d9ca5.jpg" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
    </div>
    <div class="grid-item grid-item--width2"><div class="card" style="width: 300px;">
          <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT10cwxO5PKSZTtsUxac-Gyq8xag9OtMK8MAw&usqp=CAU" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
    </div>
    <div class="grid-item"><div class="card" style="width: 300px;">
          <img class="card-img-top" src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
    </div>
    <div class="grid-item"><div class="card" style="width: 300px;">
          <img class="card-img-top" src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
    </div>
    <div class="grid-item grid-item--width2"><div class="card" style="width: 300px;">
          <img class="card-img-top" src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
    </div>
    <div class="grid-item"><div class="card" style="width: 300px;">
          <img class="card-img-top" src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
    </div>
</div>

<button type="button" class="btn btn-dark" id="more">載入更多</button>

CSS

<style type="text/css">
    .grid-item { width: 300px;margin-bottom: 10px;}
    .grid{margin: 0 auto;}/*置中*/
</style>

JS

    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>//使用cdn引入
    <script>
        $(document).ready(function() {
            $('.grid').masonry({
              // options
              itemSelector: '.grid-item',
              columnWidth: '.grid-item',
              gutter: 10,
              fitWidth: true
            });
        })
            var moreBlocks = `  html程式碼`;

            // 按下按鈕新增項目
            $('#more').click(function(){
            // make jQuery object
            var $moreBlocks = $( moreBlocks );
            // Append new blocks
            grid.append( $moreBlocks );

            // Have Masonry position new blocks
            grid.masonry( 'appended', $moreBlocks );

            }); 
    </script>