当前位置：首页 > 网页特效 > 其他

BlueprintGoogle风格的网格布局css画廊

分类：其他日期：2024-05-14 点击(5) 评论(0)

简介

Blueprint是一款响应式的css画廊。它的灵感来自于Google的Chromebook Getting Started guide。Blueprint css画廊的网格布局采用时下流行的Masonry构建，画廊图片的运动效果则由CSS 3D transforms完成。

#### HTML

------------

```html
<div id="grid-gallery" class="grid-gallery">
    <section class="grid-wrap">
        <ul class="grid">
            <li class="grid-sizer"></li>
            <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>
    <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>
</div>
```
#### 调用javascript代码

------------
首先要引入必要的js文件
```javascript
<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>
```
```javascript
<script>
    new CBPGridGallery( document.getElementById( 'grid-gallery' ) );
</script>
```

web299.com

BlueprintGoogle风格的网格布局css画廊

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果