`
云上太阳
  • 浏览: 131337 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

css+jQuery实现瀑布流

阅读更多

css+jQuery实现瀑布流

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

 

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

 

这个动态图看起来确实不太流畅,下面有下载链接,直接打开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

  • 大小: 5 MB
0
1
分享到:
评论

相关推荐

    css+html+jquery+vue实现瀑布流代码包 应用过项目实例,可以加载数据,组件内容丰富可直接使用。

    css+html+jquery+vue实现瀑布流代码包 应用过项目实例,可以加载数据,组件内容丰富可直接使用。

    jquery css3实现瀑布流照片墙特效.rar

    jquery css3实现瀑布流照片墙特效.rar jquery css3实现瀑布流照片墙特效.rar jquery css3实现瀑布流照片墙特效.rar jquery css3实现瀑布流照片墙特效.rar jquery css3实现瀑布流照片墙特效.rar jquery css3实现瀑布...

    纯静态HTML+Jquery实现网页瀑布流

    2. **Jquery 和 Masonry 插件**:Jquery是实现瀑布流的关键,而`jquery.masonry.min.js`是Jquery的一个插件,专门用于实现Masonry布局。在HTML文件中引入Jquery库和Masonry插件后,可以通过Jquery的$(document)....

    ASP+Jquery 版瀑布流程序,带数据库操作,改其他语言也简单

    瀑布流的实现原理是利用jQuery对DOM元素进行定位,根据元素的宽度和容器的宽度动态计算每个元素的位置,以达到自适应的效果。在实际应用中,可能需要结合CSS3的Flexbox或Grid布局来辅助实现更流畅的布局效果。 改写...

    基于jQuery实现瀑布流效果

    2. **CSS样式**:瀑布流的基础是CSS布局,通常我们会使用浮动布局(float)或定位(position)来实现。在jQuery中,我们需要动态调整元素的宽高和位置,使其适应不断变化的布局。 3. **JavaScript基础**:理解...

    CSS+DIV瀑布流

    瀑布流布局的核心是利用CSS的浮动(float)和定位(position)属性,以及JavaScript(或jQuery)进行动态调整。通常,每个元素(如图片)都会被赋予一定的宽度,并设置为浮动,使其在容器内水平排列。当容器一列填满...

    php+ajax 实现瀑布流

    布局是实现瀑布流的关键。CSS3的Flexbox或Grid布局可以帮助创建灵活的网格系统,适应不同屏幕大小。每个元素的位置需要根据其他元素的位置动态调整,以保持瀑布流的效果。 7. 响应式设计: 瀑布流需要对不同设备...

    php+jquery4种瀑布流

    在瀑布流布局中,jQuery主要负责监听窗口大小变化,重新计算元素的位置,以及通过AJAX加载更多的内容,以实现无限滚动的效果。 1. **基本瀑布流**:这是最基础的实现方式,通常通过计算每个元素的宽度和间隔,动态...

    Jquery+css3实现瀑布流照片墙特效

    在本项目中,"Jquery+css3实现瀑布流照片墙特效"是利用JavaScript库jQuery和CSS3的特性来创建这种动态效果,提供了一个美观且响应式的照片展示平台。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件...

    jQuery和JS实现瀑布流

    通过学习和实践如何使用jQuery和JavaScript实现瀑布流布局,不仅可以提升前端开发技能,还能为用户提供更佳的视觉体验和交互效果。同时,这个过程也会让你深入理解DOM操作、事件处理以及性能优化等关键知识点。

    瀑布流的实现方式(原生js+jquery+css3)

    实现瀑布流布局的方式多种多样,可以选择使用原生的JavaScript,也可以使用jQuery插件,还可以利用CSS3的特性来简化布局实现。 ### 1. 使用原生JavaScript实现瀑布流布局 原生JavaScript实现瀑布流主要依赖于DOM...

    jquery实现瀑布流效果

    接下来,我们将深入探讨如何使用jQuery实现瀑布流布局。 首先,我们需要理解瀑布流布局的基本原理。瀑布流布局的关键在于动态计算每个元素的宽度和位置,以便在页面加载或窗口尺寸改变时保持布局的美观。通常,我们...

    CSS3+jQuery技术应用的几个实例

    9. **瀑布流布局**:CSS3的`flexbox`或`grid`布局可以轻松实现多列布局,而jQuery可以动态调整元素尺寸和位置,适应内容变化或窗口大小调整。 10. **触摸事件**:CSS3和jQuery结合可以优化移动设备的用户体验。例如...

    asp.net+JQuery瀑布流(可从后台获得页码动态加载)

    ASP.NET与jQuery结合实现瀑布流布局是一种常见的网页设计技术,尤其在内容丰富的网站如图片展示、商品目录等场景中广泛应用。瀑布流布局以其独特的视觉效果和用户体验,使得用户可以逐行浏览内容,同时具备良好的可...

    jQuery+css3自加载瀑布流照片墙

    【jQuery+css3自加载瀑布流照片墙】是一种常见的网页设计技术,用于展示大量图片时创建美观且响应式的布局。这种技术结合了JavaScript库jQuery和CSS3的强大功能,以实现动态加载和灵活的布局效果,使得图片在页面上...

    jquery+css3实现瀑布流照片墙特效.zip

    在本项目中,"jquery+css3实现瀑布流照片墙特效.zip" 是一个使用jQuery和CSS3技术实现的示例,它涵盖了前端开发中的几个关键知识点。 首先,jQuery 是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画和...

    jq.ajax+php+mysql实现瀑布流缓冲加载数据

    在本示例中,使用jQuery的AJAX技术、PHP服务器端处理和MySQL数据库进行数据管理,实现了瀑布流数据的缓冲加载,即当用户滚动页面到底部时,自动加载更多内容,直至所有数据加载完毕。 首先,我们需要了解AJAX...

    jQuery实现瀑布流滚动加载分页效果

    本篇文章将详细介绍如何使用jQuery实现瀑布流滚动加载分页效果。 首先,我们要理解瀑布流的基本原理。瀑布流布局的关键在于计算每个元素的宽度和位置,使其能够在页面上形成连续的多列。通常我们会选择一个固定的...

Global site tag (gtag.js) - Google Analytics