欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css+jQuery实现瀑布流

程序员文章站 2022-05-17 22:21:48
...

css+jQuery实现瀑布流

                                                                                                        ——我一直不太信任自己的记忆力,所以我把它们都写下来 

 

    pinterest用瀑布流展示唯美图片没多久,国内很多网站也运用了这种漂亮的流式布局,比如蘑菇街、美丽说、花瓣网等。今天周末闲在家里,实在百无聊赖,就玩儿了一下瀑布流,先看效果,不然都没有耐心往下看了。
css+jQuery实现瀑布流
            
    
    博客分类: WEB前端 css瀑布流jQuery瀑布流下面自动加载瀑布流 
 

这个动态图看起来确实不太流畅,下面有下载链接,直接打开index.html即可看到效果.

    下面是index.html文件,看着下面的代码说下具体的思路

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width" scale-initial="1">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
	<title>jQuery实现瀑布流</title>
</head>
<body>
	<div id="main">
	  <div class="item">
	    <div class="pic">
	    <img src="img/img1.jpg">
	  <p>有的人淡了,淡的如一杯清水。有的人浓了,浓的如一杯咖啡。有的人醉了,醉在春天的梦里。有的人醒了,醒在残酷的现实。</p>
	    </div>
	  </div>
	  <div class="item">
	    <div class="pic">
	    <img src="img/img2.jpg">
	  <p>有的人淡了,淡的如一杯清水。有的人浓了,浓的如一杯咖啡。有的人醉了,醉在春天的梦里。有的人醒了,醒在残酷的现实。</p>
	    </div>
	  </div>
	  <div class="item">
	    <div class="pic">
	    <img src="img/img3.jpg">
	  <p>有的人淡了,淡的如一杯清水。有的人浓了,浓的如一杯咖啡。有的人醉了,醉在春天的梦里。有的人醒了,醒在残酷的现实。</p>
	    </div>
	  </div>
	  <div class="item">
	    <div class="pic">
	    <img src="img/img4.jpg">
	  <p>有的人淡了,淡的如一杯清水。有的人浓了,浓的如一杯咖啡。有的人醉了,醉在春天的梦里。有的人醒了,醒在残酷的现实。</p>
	    </div>
	  </div>
	  <div class="item">
	    <div class="pic">
	    <img src="img/img5.jpg">
	  <p>有的人淡了,淡的如一杯清水。有的人浓了,浓的如一杯咖啡。有的人醉了,醉在春天的梦里。有的人醒了,醒在残酷的现实。</p>
	    </div>
	  </div>
	  <div class="item">
	    <div class="pic">
	    <img src="img/img6.jpg">
	  <p>有的人淡了,淡的如一杯清水。有的人浓了,浓的如一杯咖啡。有的人醉了,醉在春天的梦里。有的人醒了,醒在残酷的现实。</p>
	    </div>
	  </div>
	  <div class="item">
	    <div class="pic">
	    <img src="img/img7.jpg">
	  <p>有的人淡了,淡的如一杯清水。有的人浓了,浓的如一杯咖啡。有的人醉了,醉在春天的梦里。有的人醒了,醒在残酷的现实。</p>
	    </div>
	  </div>
	  <div class="item">
	    <div class="pic">
	    <img src="img/img8.jpg">
	  <p>有的人淡了,淡的如一杯清水。有的人浓了,浓的如一杯咖啡。有的人醉了,醉在春天的梦里。有的人醒了,醒在残酷的现实。</p>
	    </div>
	  </div>
	  <div class="item">
	    <div class="pic">
	    <img src="img/img9.jpg">
	  <p>有的人淡了,淡的如一杯清水。有的人浓了,浓的如一杯咖啡。有的人醉了,醉在春天的梦里。有的人醒了,醒在残酷的现实。</p>
	    </div>
	  </div>
	  <div class="item">
	    <div class="pic">
	    <img src="img/img10.jpg">
	  <p>有的人淡了,淡的如一杯清水。有的人浓了,浓的如一杯咖啡。有的人醉了,醉在春天的梦里。有的人醒了,醒在残酷的现实。</p>
	    </div>
	  </div>
	  <div class="item">
	    <div class="pic">
	    <img src="img/img11.jpg">
	  <p>有的人淡了,淡的如一杯清水。有的人浓了,浓的如一杯咖啡。有的人醉了,醉在春天的梦里。有的人醒了,醒在残酷的现实。</p>
	    </div>
	  </div>
	  <div class="item">
	    <div class="pic">
	    <img src="img/img12.jpg">
	  <p>有的人淡了,淡的如一杯清水。有的人浓了,浓的如一杯咖啡。有的人醉了,醉在春天的梦里。有的人醒了,醒在残酷的现实。</p>
	    </div>
	  </div>
	  <div class="item">
	    <div class="pic">
	    <img src="img/img9.jpg">
	  <p>有的人淡了,淡的如一杯清水。有的人浓了,浓的如一杯咖啡。有的人醉了,醉在春天的梦里。有的人醒了,醒在残酷的现实。</p>
	    </div>
	  </div>
	  <div class="item">
	    <div class="pic">
	    <img src="img/img10.jpg">
	  <p>有的人淡了,淡的如一杯清水。有的人浓了,浓的如一杯咖啡。有的人醉了,醉在春天的梦里。有的人醒了,醒在残酷的现实。</p>
	    </div>
	  </div>
	  <div class="item">
	    <div class="pic">
	    <img src="img/img11.jpg">
	  <p>有的人淡了,淡的如一杯清水。有的人浓了,浓的如一杯咖啡。有的人醉了,醉在春天的梦里。有的人醒了,醒在残酷的现实。</p>
	    </div>
	  </div>
	  <div class="item">
	    <div class="pic">
	    <img src="img/img12.jpg">
	  <p>有的人淡了,淡的如一杯清水。有的人浓了,浓的如一杯咖啡。有的人醉了,醉在春天的梦里。有的人醒了,醒在残酷的现实。</p>
	    </div>
	  </div>
	</div>
</body>
</html>

    div#main 是整个瀑布流布局的父标签,div.item是瀑布流子元素,然后div.item里面可以添加图片、文字等。

    首先要明确地是瀑布流布局的思路是:元素width固定,height是不固定的。我这里设置的div#main的宽度是1024px,position=relative,这里设置相对定位是为了接下来添加子元素的绝对定位。

①然后先放了四个子元素div.item在第一行(这四个不需要设置绝对定位),然后把第一行四个元素的高度保存到数组中,假设四个元素从左到右高度依次是 arrH = [140,110,120,130]

 

②接下来元素添加的时候需要设置position=absolute,然后把它添加在上一行高度最短的一个元素下面。比如这个元素高200px,那么它应该加在第二列的位置(因为110是最小高度),怎么把它添加到第二列的位置呢?当然是设置top和left。然后把数组110改成110+200,所以现在数组变成了 arrH = [140,310,120,130]

 

③然后继续添加元素,这一次元素需要添加在第三列(因为120是最小高度),依次添加下去。

 

    上面是瀑布流实现的基本思路,还有一个知识点就是滚动条滚到下面的时候触发事件,瀑布流继续添加元素。这个不再赘述了,网上很多资料,还有我的源码。源码js文件都有注释

 

亲们下载的都给个赞哦,听说积攒人品哦。有建议的期待你回复

源码链接 瀑布流_jQuery实现.zip

  • css+jQuery实现瀑布流
            
    
    博客分类: WEB前端 css瀑布流jQuery瀑布流下面自动加载瀑布流 
  • 大小: 5 MB