Blueprint 画廊网格瀑布流布局

<div id="grid-gallery" class="grid-gallery">

    <section class="grid-wrap">

        <ul class="grid">

            <li class="grid-sizer"></li><!-- for Masonry column width -->

            <li>

                <figure>

                    <img src="img/thumb/1.png" alt="img01"/>

                    <figcaption><h3>Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption>

                </figure>

            </li>

            ......

        </ul>

    </section><!-- // grid-wrap -->

    <section class="slideshow">

        <ul>

            <li>

                <figure>

                    <figcaption>

                        <h3>Letterpress asymmetrical</h3>

                        <p>Kale chips lomo biodiesel stumptown Godard Tumblr, mustache sriracha tattooed cray aute slow-carb placeat delectus. Letterpress asymmetrical fanny pack art party est pour-over skateboard anim quis, ullamco craft beer.</p>

                    </figcaption>

                    <img src="img/large/1.png" alt="img01"/>

                </figure>

            </li>

            ......

        </ul>

        <nav>

            <span class="icon nav-prev"></span>

            <span class="icon nav-next"></span>

            <span class="icon nav-close"></span>

        </nav>

        <div class="info-keys icon">Navigate with arrow keys</div>

    </section><!-- // slideshow -->

</div><!-- // grid-gallery -->

<script src="js/imagesloaded.pkgd.min.js"></script>

<script src="js/masonry.pkgd.min.js"></script>

<script src="js/classie.js"></script>

<script src="js/cbpGridGallery.js"></script>

<script>

    new CBPGridGallery( document.getElementById( 'grid-gallery' ) );

</script>