5-2 编程挑战
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程挑战

小伙伴们，根据所学知识，使用jQuery实现加载图片带有分散效果的瀑布流布局

任务

一、定义图片布局函数waterfall

二、在waterfall函数中定义根据class获取元素函数getByClass

三、计算整个父盒子的宽度且让它在浏览器中水平居中

四、计算及排列每个数据块应该出现的位置，一开始数据块紧跟在第二张图片的后边且位于最高的那个图片的下边，然后通过动画分散到它该出现的位置

五、拖动滚动条时定义检测是否具备了滚条加载数据块条件的函数。

六、遍历给出的数据，将图片添加到数据块中渲染出来

 

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <script type="text/javascript" src="js/jquery-1.8.3.min.js"/></script>
  6. <title>带有分散效果的瀑布流</title>
  7. <style type="text/css">
  8.     *{padding: 0;margin:0;}
  9.     #main{
  10.         position: relative;
  11.     }
  12.     .pin{
  13.         padding: 15px 0 0 15px;
  14.         float:left;
  15.     }
  16.     .box{
  17.         padding: 10px;
  18.         border:1px solid #ccc;
  19.         box-shadow: 0 0 6px #ccc;
  20.         border-radius: 5px;
  21.     }
  22.     .box img{
  23.         width:162px;
  24.         height:auto;
  25.     }
  26. </style>
  27. <script>
  28. $( window ).on( "load", function(){
  29.    // 调用waterfall函数
  30.     var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
  31.     window.onscroll=function(){
  32.        // 拖动滚动条时
  33.      }
  34. });
  35. function waterfall(){
  36.  // 计算及定位数据块显示分散效果
  37. }
  38.  
  39. function checkscrollside(){
  40.   // 检测是否具备了加载数据块的条件
  41. }
  42.  
  43. </script>
  44. </head>
  45. <body>
  46. <div id="main">
  47.     <div class="pin">
  48.         <div class="box">
  49.             <img src="./images/1.jpg"/>
  50.         </div>
  51.     </div>
  52.     <div class="pin">
  53.         <div class="box">
  54.             <img src="./images/2.jpg"/>
  55.         </div>
  56.     </div>
  57.     <div class="pin">
  58.         <div class="box">
  59.             <img src="./images/3.jpg"/>
  60.         </div>
  61.     </div>
  62.     <div class="pin">
  63.         <div class="box">
  64.             <img src="./images/4.jpg"/>
  65.         </div>
  66.     </div>
  67.     <div class="pin">
  68.         <div class="box">
  69.             <img src="./images/5.jpg"/>
  70.         </div>
  71.     </div>
  72.     <div class="pin">
  73.         <div class="box">
  74.             <img src="./images/6.jpg"/>
  75.         </div>
  76.     </div>
  77.     <div class="pin">
  78.         <div class="box">
  79.             <img src="./images/7.jpg"/>
  80.         </div>
  81.     </div>
  82.     <div class="pin">
  83.         <div class="box">
  84.             <img src="./images/8.jpg"/>
  85.         </div>
  86.     </div>
  87.     <div class="pin">
  88.         <div class="box">
  89.             <img src="./images/9.jpg"/>
  90.         </div>
  91.     </div>
  92.     <div class="pin">
  93.         <div class="box">
  94.             <img src="./images/10.jpg"/>
  95.         </div>
  96.     </div>
  97.     <div class="pin">
  98.         <div class="box">
  99.             <img src="./images/11.jpg"/>
  100.         </div>
  101.     </div>
  102.     <div class="pin">
  103.         <div class="box">
  104.             <img src="./images/12.jpg"/>
  105.         </div>
  106.     </div>
  107.     <div class="pin">
  108.         <div class="box">
  109.             <img src="./images/13.jpg"/>
  110.         </div>
  111.     </div>
  112.     <div class="pin">
  113.         <div class="box">
  114.             <img src="./images/14.jpg"/>
  115.         </div>
  116.     </div>
  117.     <div class="pin">
  118.         <div class="box">
  119.             <img src="./images/15.jpg"/>
  120.         </div>
  121.     </div>
  122.     <div class="pin">
  123.         <div class="box">
  124.             <img src="./images/16.jpg"/>
  125.         </div>
  126.     </div>
  127.     <div class="pin">
  128.         <div class="box">
  129.             <img src="./images/17.jpg"/>
  130.         </div>
  131.     </div>
  132.     <div class="pin">
  133.         <div class="box">
  134.             <img src="./images/18.jpg"/>
  135.         </div>
  136.     </div>
  137.     <div class="pin">
  138.         <div class="box">
  139.             <img src="./images/19.jpg"/>
  140.         </div>
  141.     </div>
  142.     <div class="pin">
  143.         <div class="box">
  144.             <img src="./images/20.jpg"/>
  145.         </div>
  146.     </div>
  147.     <div class="pin">
  148.         <div class="box">
  149.             <img src="./images/21.jpg"/>
  150.         </div>
  151.     </div>
  152. </div>
  153. </body>
  154. </html>
返回课程