1.综述
最近研究了时下流行的瀑布流展示效果。 当前共计尝试的方法及其优缺点如下：
（1）基于JQuery框架及blocksit.min.js实现的瀑布流不连续，每列中多多少少都会有一些位置出现空白。
（2）基于JQuery框架，用匿名函数形式，自编程实现瀑布流
（3）基于CSS3，chrome、火狐、搜狗浏览器显示正常，但IE8、IE10均不能显示瀑布流 只能显示单列照片，使用Web中介绍的ie-css3.htc或PIE插件仍不能在IE中显示瀑布流效果
（4）基于DIV 用<script>实现的瀑布流，本地瀑布流测试效果正常
2.CSS3实现
CSS3的优点是实现简单，瀑布流效果已经包含在样式中，但IE对其不支持。
演示代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3瀑布布局Demo</title>
<style>
.container {
-webkit-column-width:160px;
-moz-column-width:160px;
-o-colum-width:160px;
-webkit-column-gap:1px;
-moz-column-gap:1px;
-o-column-gap:1px;
}
div:not(.container) {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#D9D9D9;
border::#CCC 1px solid;
display:inline-block;
width:157px;
position:relative;
margin:2px;
}
</style>
</head>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3瀑布布局Demo</title>
<style>
.container {
-webkit-column-width:160px;
-moz-column-width:160px;
-o-colum-width:160px;
-webkit-column-gap:1px;
-moz-column-gap:1px;
-o-column-gap:1px;
}
div:not(.container) {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#D9D9D9;
border::#CCC 1px solid;
display:inline-block;
width:157px;
position:relative;
margin:2px;
}
</style>
</head>
<body>
<div class="photocontainer"><img src="25b.jpg" onload="autoResize(this,160);"/><p>01</p></div>
<div class="photocontainer"><img src="df1260.jpg" onload="autoResize(this,160);"/><p>02</p></div>
<div class="photocontainer"><img src="462d10.jpg" onload="autoResize(this,160);"/><p>03</p></div>
</div>
<div class="photocontainer"><img src="25b.jpg" onload="autoResize(this,160);"/><p>01</p></div>
<div class="photocontainer"><img src="df1260.jpg" onload="autoResize(this,160);"/><p>02</p></div>
<div class="photocontainer"><img src="462d10.jpg" onload="autoResize(this,160);"/><p>03</p></div>
</div>
</body>
</html>
</html>
相关推荐
本教程将通过一个具体的实例——“微信小程序-实现瀑布流布局demo”来探讨如何在微信小程序中实现瀑布流布局和无限下拉加载功能。 首先，我们要理解瀑布流布局。这是一种常见的网页设计布局方式，其特点是以多列...
在这个“微信小程序图片瀑布流布局demo”中，我们将会探讨如何在微信小程序中实现图片的瀑布流展示，这是一种常见的网页和移动应用设计模式，尤其适用于图片分享和展示类应用。 瀑布流布局，又称为无限滚动或荷叶边...
在压缩包中的"瀑布流Demo"可能包含了HTML、CSS和JavaScript文件，你可以通过查看和学习这些文件了解瀑布流布局的具体实现细节。这个小例子可能包含了一些基础的计算和布局逻辑，适合初学者理解和实践瀑布流布局的...
响应式PC和手机瀑布流是一种...总结起来，"自适应PC手机瀑布流demo"是一个展示了如何用JavaScript和响应式设计技术实现跨平台的多列布局示例。通过理解和应用这些技术，开发者可以创建更加灵活且用户友好的网页应用。
本压缩包中的"特效源码瀑布流demo"提供了实现这一效果的源代码示例。通过学习和研究这个demo，你可以了解到以下几个关键知识点： 1. **响应式设计**：瀑布流布局通常需要具备响应式能力，能够自适应不同的屏幕尺寸...
在"精典源码之瀑布流DEMO源码.zip"这个压缩包中，我们可以找到与瀑布流布局相关的资源。首先，"瀑布流示例图片.png"应该是展示瀑布流布局效果的截图，它能帮助我们直观理解瀑布流布局的视觉表现，包括元素的大小不一...
本项目"jQuery瀑布流Demo"是基于jQuery实现的一种图片展示方案，它能够动态加载图片，即当用户滚动页面到一定位置时，新的图片会自动加载并无缝融入瀑布流布局中，这种技术被称为无限滚动或滚动加载。这种设计优化了...
在这个名为“瀑布流Demo1”的项目中，我们可以预期找到一个简单的实现瀑布流布局的示例代码。通常，这样的Demo会包含HTML、CSS和JavaScript（可能使用jQuery或其他库）三个主要部分。 1. HTML结构： HTML部分主要...
在提供的压缩包文件中，包含了三个不同的瀑布流demo，这些demo采用不同的方法实现了瀑布流效果，对于初学者来说，是非常有价值的参考资料。下面将详细介绍可能涉及的知识点： 1. **JavaScript/jQuery实现**：瀑布流...
6. **兼容性处理**：由于"Demo-瀑布流"声明已通过IE7、火狐和谷歌的测试，这意味着它可能包含了针对旧版本浏览器的兼容性解决方案，例如使用jQuery或其他兼容性库来弥补老版本浏览器对CSS3和HTML5新特性的支持不足。...
3. **适配不同屏幕尺寸**：为了实现响应式设计，瀑布流布局需要能根据设备的屏幕尺寸和方向自动调整。这可能涉及到媒体查询（Media Queries）和断点设置，以确保在不同设备上都能有良好的显示效果。 4. **数据加载...
1. **CSS Flexbox或Grid布局**：瀑布流布局的实现通常基于现代CSS布局技术，如Flexbox或CSS Grid。Flexbox擅长处理一维布局，而Grid则适合二维布局。在这个demo中，开发者可能使用了其中之一来实现元素的动态排列。 ...
1. **CSS Flexbox 或 Grid布局**：瀑布流布局通常基于现代CSS布局技术实现，如Flexbox或CSS Grid。Flexbox适用于一维布局，如行或列，而Grid则更适合二维布局。在这个demo中，可能会利用CSS Grid来创建更灵活的网格...
总结来说，"waterfall 瀑布流 demo"是一个基于jQuery实现的图片瀑布流加载示例，涉及到的关键技术包括jQuery操作DOM、事件处理、Ajax异步加载以及自适应布局计算。它提供了从静态加载到动态加载的框架，为开发者展示...
本文将详细介绍如何使用JavaScript实现移动端的瀑布流加载，并提供学习指导。 首先，理解瀑布流布局的核心概念： 1. **容器划分**：将页面分为多个列，每个列的宽度固定，但高度可变。 2. **元素分配**：根据列的...
- **响应式设计**：根据设备的不同屏幕尺寸和方向调整瀑布流的布局，确保在移动设备上也有良好的显示效果。 在提供的"WaterFall"文件中，可能包含了实现上述功能的HTML、CSS和JavaScript代码，包括但不限于Ajax请求...
1. **纯CSS解决方案**：使用CSS3的`column-count`和`column-gap`属性，可以实现简单的瀑布流效果，但这种方式灵活性较低，不适用于动态加载或响应式设计。 2. **JavaScript库**：如jQuery Masonry、Isotope等，它们...
CSS3的`column-count`和`column-gap`属性可以用来创建多列布局，实现瀑布流效果。`column-count`定义了元素应分成多少列，而`column-gap`设置列之间的间距。这种方法简单易用，但在某些情况下可能无法精确控制元素...
1. **CSS Flexbox或Grid布局**：瀑布流的实现通常依赖于CSS的弹性盒模型（Flexbox）或网格布局（Grid）。Flexbox适用于简单的两列或多列布局，通过调整元素的`flex-grow`, `flex-shrink`, 和 `flex-basis`属性来实现...