使用jquery实现错落有致的页面瀑布流效果

2015-5-13 Jon js+jquery+ajax

使用jquery实现页面瀑布流效果

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>使用jquery实现页面瀑布流效果</title>
    <!--
      传统的瀑布流，是有几列就写使用几个外层 div，然后浮动，每个内容添加到相应的 div 中
      jquery瀑布流，不使用外层 div 包裹 使用jquery改变每个div的 top 值和 left 值。
      jquery瀑布流的优点{
        1，方便后台套模板循环
        2，自动加载是只放div就行
      }
     -->
     <style>
      *{padding:0;margin:0;}
      .wrap{width: 1040px;margin:0 auto;position: relative;}
      .wrap .txt{position: absolute;}
     </style>
  </head>
  <body>
    <div class="wrap">
      <div class="txt"><img src="http://placehold.it/230x420" height="420" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x300" height="300" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x320" height="320" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x480" height="480" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x360" height="360" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x510" height="510" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x490" height="490" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x500" height="500" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x400" height="400" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x470" height="470" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x400" height="400" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x450" height="450" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x480" height="480" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x490" height="490" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x410" height="410" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x500" height="500" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x300" height="300" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x500" height="500" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x470" height="470" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x400" height="400" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x450" height="450" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x360" height="360" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x490" height="490" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x300" height="300" alt=""></div>
      <div class="txt"><img src="http://placehold.it/230x420" height="420" alt=""></div>
    </div>
    <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script>
      $(function(){
        var oTxt=$('.txt');
        var Tlen=oTxt.length;
        var oHeight={
          arr1:[],
          arr2:[],
          arr3:[],
          arr4:[]
        };
        for(var i=0;i<Tlen;i++){
          var num=i%4;
          // 设置 left
          oTxt.eq(i).css('left',num*270+'px');
          var oTop=0;
          // 设置 top
          switch(num){
            case 0:
              for(var j=0;j<oHeight.arr1.length;j++){
                oTop+=oHeight.arr1[j]+10;
              }
              oTxt.eq(i).css('top',oTop+'px');
              oHeight.arr1.push(oTxt.eq(i).height());
              break;
            case 1:
              for(var j=0;j<oHeight.arr2.length;j++){
                oTop+=oHeight.arr2[j]+10;
              }
              oTxt.eq(i).css('top',oTop+'px');
              oHeight.arr2.push(oTxt.eq(i).height());
              break;
            case 2:
              for(var j=0;j<oHeight.arr3.length;j++){
                oTop+=oHeight.arr3[j]+10;
              }
              oTxt.eq(i).css('top',oTop+'px');
              oHeight.arr3.push(oTxt.eq(i).height());
              break;
            case 3:
              for(var j=0;j<oHeight.arr4.length;j++){
                oTop+=oHeight.arr4[j]+10;
              }
              oTxt.eq(i).css('top',oTop+'px');
              oHeight.arr4.push(oTxt.eq(i).height());
              break;
          }
        }
      });
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

标签: jquery实现页面瀑布流网页瀑布流