瀑布流布局学习
发布时间:2016-10-14 00:00:31
特点:等宽不等高。实现方式:Javascript/Jquery/CSS3多栏布局。样例网站:花瓣网-->分类(http://huaban.com/)一、JS实现瀑布流 index.html:页面结构 1 <!DOCTYPE ...
- 特点:等宽不等高。
- 实现方式:Javascript/Jquery/CSS3多栏布局。
- 样例网站:花瓣网-->分类(http://huaban.com/)
一、JS实现瀑布流
index.html:页面结构
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>瀑布流布局</title> 6 <link rel="stylesheet" href="styles/layout.css"> 7 </head> 8 <body> 9 <div id="main">10 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/0.jpg" ></div></div>11 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/1.jpg" ></div></div>12 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/2.jpg" ></div></div>13 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/3.jpg" ></div></div>14 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/4.jpg" ></div></div>15 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/5.jpg" ></div></div>16 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/6.jpg" ></div></div>17 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/7.jpg" ></div></div>18 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/8.jpg" ></div></div>19 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/9.jpg" ></div></div>20 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/10.jpg" ></div></div>21 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/11.jpg" ></div></div>22 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/12.jpg" ></div></div>23 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/13.jpg" ></div></div>24 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/14.jpg" ></div></div>25 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/15.jpg" ></div></div>26 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/16.jpg" ></div></div>27 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/17.jpg" ></div></div>28 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/18.jpg" ></div></div>29 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/19.jpg" ></div></div>30 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/20.jpg" ></div></div>31 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/21.jpg" ></div></div>32 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/22.jpg" ></div></div>33 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/23.jpg" ></div></div>34 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/24.jpg" ></div></div>35 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/25.jpg" ></div></div>36 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/26.jpg" ></div></div>37 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/27.jpg" ></div></div>38 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/28.jpg" ></div></div>39 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/29.jpg" ></div></div>40 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/30.jpg" ></div></div>41 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/31.jpg" ></div></div>42 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/32.jpg" ></div></div>43 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/33.jpg" ></div></div>44 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/34.jpg" ></div></div>45 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/35.jpg" ></div></div>46 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/36.jpg" ></div></div>47 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/37.jpg" ></div></div>48 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/38.jpg" ></div></div>49 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/39.jpg" ></div></div>50 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/40.jpg" ></div></div>51 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/41.jpg" ></div></div>52 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/42.jpg" ></div></div>53 <div class="box"><div class="pic"><img src='/images/loading.gif' data-original="../waterFall/pic/43.jpg" ></div></div>54 </div>55 <script src='/images/loading.gif' data-original="scripts/waterfall.js"></script>56 </body>57 </html>
原标题:瀑布流布局学习
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。