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

2015-5-13 Jon
使用jquery实现页面瀑布流效果

<br />
  <!DOCTYPE html><br />
  <html lang="en"><br />
  <head><br />
    <meta charset="UTF-8"><br />
    <title>使用jquery实现页面瀑布流效果</title><br />
    <!--<br />
      传统的瀑布流，是有几列就写使用几个外层 div，然后浮动，每个内容添加到相应的 div 中<br />
      jquery瀑布流，不使用外层 div 包裹 使用jquery改变每个div的 top 值和 left 值。<br />
      jquery瀑布流的优点{<br />
        1，方便后台套模板循环<br />
        2，自动加载是只放div就行<br />
      }<br />
     --><br />
     <style><br />
      *{padding:0;margin:0;}<br />
      .wrap{width: 1040px;margin:0 auto;position: relative;}<br />
      .wrap .txt{position: absolute;}<br />
     </style><br />
  </head><br />
  <body><br />
    <div class="wrap"><br />
      <div class="txt"><img src="http://placehold.it/230x420" height="420" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x300" height="300" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x320" height="320" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x480" height="480" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x360" height="360" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x510" height="510" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x490" height="490" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x500" height="500" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x400" height="400" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x470" height="470" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x400" height="400" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x450" height="450" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x480" height="480" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x490" height="490" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x410" height="410" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x500" height="500" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x300" height="300" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x500" height="500" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x470" height="470" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x400" height="400" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x450" height="450" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x360" height="360" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x490" height="490" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x300" height="300" alt=""></div><br />
      <div class="txt"><img src="http://placehold.it/230x420" height="420" alt=""></div><br />
    </div><br />
    <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br />
    <script><br />
      $(function(){<br />
        var oTxt=$('.txt');<br />
        var Tlen=oTxt.length;<br />
        var oHeight={<br />
          arr1:[],<br />
          arr2:[],<br />
          arr3:[],<br />
          arr4:[]<br />
        };<br />
        for(var i=0;i<Tlen;i++){<br />
          var num=i%4;<br />
          // 设置 left<br />
          oTxt.eq(i).css('left',num*270+'px');<br />
          var oTop=0;<br />
          // 设置 top<br />
          switch(num){<br />
            case 0:<br />
              for(var j=0;j<oHeight.arr1.length;j++){<br />
                oTop+=oHeight.arr1[j]+10;<br />
              }<br />
              oTxt.eq(i).css('top',oTop+'px');<br />
              oHeight.arr1.push(oTxt.eq(i).height());<br />
              break;<br />
            case 1:<br />
              for(var j=0;j<oHeight.arr2.length;j++){<br />
                oTop+=oHeight.arr2[j]+10;<br />
              }<br />
              oTxt.eq(i).css('top',oTop+'px');<br />
              oHeight.arr2.push(oTxt.eq(i).height());<br />
              break;<br />
            case 2:<br />
              for(var j=0;j<oHeight.arr3.length;j++){<br />
                oTop+=oHeight.arr3[j]+10;<br />
              }<br />
              oTxt.eq(i).css('top',oTop+'px');<br />
              oHeight.arr3.push(oTxt.eq(i).height());<br />
              break;<br />
            case 3:<br />
              for(var j=0;j<oHeight.arr4.length;j++){<br />
                oTop+=oHeight.arr4[j]+10;<br />
              }<br />
              oTxt.eq(i).css('top',oTop+'px');<br />
              oHeight.arr4.push(oTxt.eq(i).height());<br />
              break;<br />
          }<br />
        }<br />
      });<br />
    </script><br />
  </body><br />
  </html><br />
您可以修改框中代码后运行查看
评论：
磁选机
2024-08-03 14:02 回复
zuewkb26031HL-真的是一篇好文，让我对XX问题有了更清晰的认识。www.well-techmachine.cn/chenggonganli/73.html