demo.css
*{ padding: 0; margin: 0; } .wrap{ position: relative; } .box{ position: absolute; left: 0; top: 0; width: 250px; } .box img{ width: 250px; }
demo.js
$(function(){ $('img').load(function(){ var box = $('.box'); var boxHeight = { leftBox:[], centerBox:[], rightBox:[] } for(var i=0;i<box.length;i++){ var now = i%3; //now的值为0,1,2 switch(now){ case 0: box.eq(i).css('left','10px'); boxHeight.leftBox.push(box.eq(i).height()); var now2 = Math.floor(i/3); if(now2==0){ box.eq(i).css('top',0); }else{ var total = 0; for(var j=0;j<now2;j++){ total += boxHeight.leftBox[j]+10; } box.eq(i).css('top',total+'px') } break; case 1: box.eq(i).css('left','270px'); boxHeight.centerBox.push(box.eq(i).height()); var now2 = Math.floor(i/3); if(now2==0){ box.eq(i).css('top',0); }else{ var total = 0; for(var j=0;j<now2;j++){ total += boxHeight.centerBox[j]+10; } box.eq(i).css('top',total+'px') } break; case 2: box.eq(i).css('left','530px'); boxHeight.rightBox.push(box.eq(i).height()); var now2 = Math.floor(i/3); if(now2==0){ box.eq(i).css('top',0); }else{ var total = 0; for(var j=0;j<now2;j++){ total += boxHeight.rightBox[j]+10; } box.eq(i).css('top',total+'px') } break; } } }); });
demo.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>waterFall</title> <link rel="stylesheet" href="demo.css"> <script src="jquery.js"></script> <script src="demo.js"></script> </head> <body> <div class="wrap"> <div class="box"> <img src="1.jpg" alt=""> <p>1111111</p> </div> <div class="box"> <img src="2.jpg" alt=""> <p>22222222</p> </div> <div class="box"> <img src="3.jpg" alt=""> <p>33333333</p> </div> <div class="box"> <img src="4.jpg" alt=""> <p>4444444</p> </div> <div class="box"> <img src="5.jpg" alt=""> <p>55555555</p> </div> <div class="box"> <img src="6.jpg" alt=""> <p>666666666666</p> </div> <div class="box"> <img src="7.jpg" alt=""> <p>77777777</p> </div> <div class="box"> <img src="8.jpg" alt=""> <p>888888888888888</p> </div> <div class="box"> <img src="9.jpg" alt=""> <p>99999999999999</p> </div> </div> </body> </html>
效果图:
相关推荐
“JQ瀑布流插件”通常是指基于jQuery的、用于实现瀑布流布局的JavaScript插件。这些插件简化了开发者实现瀑布流布局的过程,通过简单的API调用和配置选项,就能在网页上快速构建出美观的瀑布流布局。 这个压缩包中...
瀑布流布局,也被称为Masonry布局,是一种网页布局方式,常用于展示图片或者商品,使得页面在不同分辨率和屏幕尺寸下都能呈现出良好的视觉效果。它以其独特的“流动”特性,让内容块像瀑布一样逐个排列,每列高度...
总的来说,JQ瀑布流加载涉及到的技术点包括:jQuery的DOM操作、AJAX请求、JSON数据解析、滚动事件监听以及瀑布流布局算法的实现。通过这些技术的组合,我们可以在网页上实现流畅且美观的瀑布流加载效果,提高用户...
瀑布流布局,也被称为Masonry布局,是一种在网页设计中广泛应用的展示方式,尤其在图片墙、电商产品展示等场景中十分常见。这种布局的特点是元素随着页面滚动而垂直排列,每行元素的顶部对齐,形成类似瀑布的效果。...
瀑布流布局是一种常见的网页设计方式,它模仿了瀑布两侧连续不断的瀑布形态,使得网页上的内容可以自上而下、逐列加载,同时保持各列高度一致。在前端开发中,jQuery是一个广泛使用的JavaScript库,提供了丰富的API...
瀑布流布局,又称Masonry布局,是一种常见的网页布局方式,尤其在展示图片或者商品时非常流行。这种布局方式的特点是每一列的顶部对齐,但列与列之间的高度不一致,形成一种像瀑布一样逐级下降的效果。在前端开发中...
瀑布流布局,也被称为Masonry布局,是一种网页布局模式,其特点是内容元素会像瀑布一样依次自上而下排列,每一列的元素顶部对齐,但各列的宽度可能不一致,形成一种错落有致的视觉效果。这种布局常用于图片展示、...
**jQuery瀑布流插件详解** 瀑布流布局,也称为Masonry布局,是一种常见的网页布局方式,主要用于图片展示或内容排列,使得页面在不同分辨率的设备上都能呈现出良好的视觉效果。这种布局方式的特点是元素可以自动...
瀑布流布局,也被称为Masonry布局,是一种网页布局方式,常用于图片展示,它通过将内容元素(如图片)按照不等宽但等高的样式排列,形成类似瀑布的效果,逐个下落,使得页面看起来既美观又富有动态感。在本项目中,...
瀑布流布局的特点在于,内容元素可以以多列的形式呈现,随着页面滚动,新的内容会自动填充空白区域,形成一种类似瀑布的效果。 在实现过程中,jQuery手机端瀑布流布局主要涉及以下几个关键知识点: 1. **jQuery库*...
这是一款简单实用的类似Masonry瀑布流的jQuery图片网格布局插件。该Masonry瀑布流布局简单易用,它通过imagesloaded来加载图片,并且可以非常方便的动态添加任意数量的图片到网格布局中。
瀑布流布局是一种常见的网页设计样式,它模仿了自然瀑布中水流自上而下连续流动的效果。在网页上,瀑布流布局通常用于展示图片或内容,每个元素(如图片)会根据页面宽度自动调整并垂直对齐,形成多列布局,且每一列...
简单的js实现瀑布流示例,相关技术jq。可借鉴。。。。
瀑布流布局是一种常见的网页设计样式,它以一种不规则的方式排列元素,使页面看起来像瀑布一样自上而下流动。这种布局方式常用于图片展示、文章列表等场景,能够提供良好的用户体验,因为用户无需滚动过多就能看到新...
瀑布流布局,也被称为Masonry布局,是一种网页布局方式,常用于图片展示或者商品列表,其特点是每一列的顶部对齐,而每列的高度则根据内容自动调整,呈现出类似瀑布倾泻的效果。在jQuery中实现瀑布流加载,通常结合...
结合这两个概念,"jQuery淡入淡出瀑布流效果"是指使用jQuery实现的一种动态展示瀑布流布局的图片或内容,通过淡入淡出的动画效果增加视觉吸引力。 要创建这样的效果,首先需要对jQuery有深入的理解,包括选择器、...
"jq-waterfall"是一款基于jQuery的瀑布流插件,其核心目标是实现类似Pinterest的图片无限滚动加载效果。该插件响应式设计,能够根据用户设备的屏幕尺寸和方向自动调整布局,确保在各种设备上都能呈现出良好的显示...
瀑布流布局,也被称为Masonry布局,是一种网页元素排列方式,常见于图片展示或内容推荐网站,其特点是每个元素(如图片)根据其自身大小垂直对齐,形成类似瀑布倾泻的效果。在网页中实现这样的效果,jQuery是一个...
瀑布流布局,也被称为Masonry布局,是一种网页布局方式,常用于展示图片或者内容卡片,使得它们在页面上像瀑布一样自然下落,每行的元素数量不固定,随着浏览器窗口大小的变化而自适应调整。这种布局方式既美观又...