网页瀑布流布局jQuery实现代码

ゝ一纸荒年。 2022-01-05 05:51 296阅读 0赞

# 这篇文章主要为大家详细介绍了网页瀑布流布局jQuery实现方式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下 #

**什么是瀑布流网页布局？**

![20161021105240242.jpg_2016921105248][]

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

下面来看代码，用纯CSS3来做看效果怎样！

HTML

[ ][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> 
    <div>
      38 
    </div> 
    <div>
      39 
    </div> 
    <div>
      40 
    </div> 
    <div>
      41 
    </div> 
    <div>
      42 
    </div> 
    <div>
      43 
    </div> 
    <div>
      44 
    </div> 
    <div>
      45 
    </div> 
    <div>
      46 
    </div> 
    <div>
      47 
    </div> 
    <div>
      48 
    </div> 
    <div>
      49 
    </div> 
    <div>
      50 
    </div> 
    <div>
      51 
    </div> 
    <div>
      52 
    </div> 
    <div>
      53 
    </div> 
    <div>
      54 
    </div> 
    <div>
      55 
    </div> 
    <div>
      56 
    </div> 
    <div>
      57 
    </div> 
    <div>
      58 
    </div> 
    <div>
      59 
    </div> 
    <div>
      60 
    </div> 
    <div>
      61 
    </div> 
    <div>
      62 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"all"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"box"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"pic"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>img</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"cars/1.jpg"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"box"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"pic"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>img</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"cars/2.jpg"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"box"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"pic"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>img</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"cars/3.jpg"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"box"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"pic"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>img</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"cars/4.jpg"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"box"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"pic"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>img</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"cars/5.jpg"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"box"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"pic"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>img</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"cars/6.jpg"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"box"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"pic"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>img</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"cars/7.jpg"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"box"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"pic"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>img</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"cars/8.jpg"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"box"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"pic"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>img</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"cars/9.jpg"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"box"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"pic"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>img</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"cars/10.jpg"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"box"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"pic"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>img</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"cars/11.jpg"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"box"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>class</code> 
      <code>=</code> 
      <code>"pic"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>img</code> 
      <code>src</code> 
      <code>=</code> 
      <code>"cars/12.jpg"</code> 
      <code>/&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这里用一个大盒子来装全部内容，小盒子box装块内容，pic盒子装图片。看css的代码

CSS

[ ][Link 1]

效果就出来了

![20161021105420458.jpg_2016921105430][]

可见CSS3虽然实现了瀑布流，但是画风看起来诡异，左右排布间距不够灵活。列宽随着浏览器窗口大小进行改变，用户体验不好，图片排序按照垂直顺序排列，打乱图片显示顺序，图片加载还是依靠JavaScript来实现。唯一优势是不需要计算，浏览器自动计算，只需设置列宽，性能高。

为了得到更好的效果，所以我们还是用算法来实现吧，下面来看jquery代码配合css来实现瀑布流。

CSS

[ ][Link 1]

jquery

[ ][Link 1]

效果如下

![20161021105330688.jpg_2016921105338][]

很明显效果好多了，图片排序是按照图片计算的位置横向排序，位置是计算出来的，比较规范。

（转载） http://www.jb51.net/article/95340.htm

转载于:https://www.cnblogs.com/snowlove/p/6071693.html

[20161021105240242.jpg_2016921105248]: http://files.jb51.net/file_images/article/201610/20161021105240242.jpg?2016921105248
[Link 1]: http://www.jb51.net/article/95340.htm#
[20161021105420458.jpg_2016921105430]: http://files.jb51.net/file_images/article/201610/20161021105420458.jpg?2016921105430
[20161021105330688.jpg_2016921105338]: http://files.jb51.net/file_images/article/201610/20161021105330688.jpg?2016921105338