插件描述：一个响应网格与画廊视图,使用3d转换。
请注意,我们使用CSS 3d变换仅支持的现代浏览器。
实现代码
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | <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> <li> <figure> <img src="img/thumb/2.png" alt="img02"/> <figcaption><h3>Vice velit chia</h3><p>Laborum tattooed iPhone, Schlitz irure nulla Tonx retro 90's chia cardigan quis asymmetrical paleo. </p></figcaption> </figure> </li> <li> <figure> <img src="img/thumb/3.png" alt="img03"/> <figcaption><h3>Brunch semiotics</h3><p>Ex disrupt cray yr, butcher pour-over magna umami kitsch before they sold out commodo.</p></figcaption> </figure> </li> <li> <figure> <img src="img/thumb/4.png" alt="img04"/> <figcaption><h3>Chillwave nihil occupy</h3><p>In post-ironic gluten-free deserunt, PBR&B non pork belly cupidatat polaroid. </p></figcaption> </figure> </li> <li> <figure> <img src="img/thumb/5.png" alt="img05"/> <figcaption><h3>Kale chips lomo biodiesel</h3><p>Pariatur food truck street art consequat sustainable, et kogi beard qui paleo. </p></figcaption> </figure> </li> <li> <figure> <img src="img/thumb/6.png" alt="img06"/> <figcaption><h3>Exercitation occaecat</h3><p>Street chillwave hoodie ea gentrify.</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> <li> <figure> <figcaption> <h3>Vice velit chia</h3> <p>Chillwave Echo Park Etsy organic Cosby sweater seitan authentic pour-over. Occupy wolf selvage bespoke tattooed, cred sustainable Odd Future hashtag butcher.</p> </figcaption> <img src="img/large/2.png" alt="img02"/> </figure> </li> <li> <figure> <figcaption> <h3>Brunch semiotics</h3> <p>IPhone PBR polaroid before they sold out meh you probably haven't heard of them leggings tattooed tote bag, butcher paleo next level single-origin coffee photo booth.</p> </figcaption> <img src="img/large/3.png" alt="img03"/> </figure> </li> <li> <figure> <figcaption> <h3>Chillwave nihil occupy</h3> <p>Vice cliche locavore mumblecore vegan wayfarers asymmetrical letterpress hoodie mustache. Shabby chic lomo polaroid, scenester 8-bit Portland Pitchfork VHS tote bag.</p> </figcaption> <img src="img/large/4.png" alt="img04"/> </figure> </li> <li> <figure> <figcaption> <h3>Kale chips lomo biodiesel</h3> <p>Chambray Schlitz pug YOLO, PBR Tumblr semiotics. Flexitarian YOLO ennui Blue Bottle, forage dreamcatcher chillwave put a bird on it craft beer Etsy.</p> </figcaption> <img src="img/large/5.png" alt="img05"/> </figure> </li> <li> <figure> <figcaption> <h3>Exercitation occaecat</h3> <p>Cosby sweater hella lomo Thundercats VHS occupy High Life. Synth pop-up readymade single-origin coffee, fanny pack tousled retro. Fingerstache mlkshk ugh hashtag, church-key ethnic street art pug yr.</p> </figcaption> <img src="img/large/6.png" alt="img06"/> </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> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！ 本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！ 如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
|