你的位置:首页 > 软件开发 > Java > 瀑布流布局学习

瀑布流布局学习

发布时间:2016-10-14 00:00:31
特点:等宽不等高。实现方式:Javascript/Jquery/CSS3多栏布局。样例网站:花瓣网-->分类(http://huaban.com/)一、JS实现瀑布流 index.html:页面结构 1 <!DOCTYPE ...
  1. 特点:等宽不等高。
  2. 实现方式:Javascript/Jquery/CSS3多栏布局。
  3. 样例网站:花瓣网-->分类(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 (#换成@)。

可能感兴趣文章

我的浏览记录