1：使用插件 masonry
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.masonry.js"></script>
<style>
*{
margin:0;
padding:0;
}
body{
text-align:center;
}
#container{
width:800px;
border:1px solid #999;
margin-left:auto;
margin-right:auto;
padding-left:10px;
}
.box{
width:175px;
border:1px solid #ddd;
padding:5px;
margin:5px;
text-align:left;
}
</style>
</head>
<body>
<div id="container" class="clearfix">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box">
<h2>Sit amet mi ullamcorper vehicula</h2>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. </p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. </p>
</div>
<div class="box">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div class="box">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box">
<p>Morbi purus libero</p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. </p>
</div>
<div class="box">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
</div>
<div class="box">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box">
<h2>Morbi purus libero</h2>
</div>
<div class="box">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, </p>
</div>
<div class="box">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<script>
/*
* 使用masonry插件；
* http://masonry.desandro.com/
* *******made by keimon**********
* *********2013-01-28*************
*/
$(function(){
$('#container').masonry({
itemSelector: '.box'
});
});
</script>
</body>
</html>
=================================================================================
2：jquery实现瀑布流
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
body{
text-align:center;
}
#container{
width:800px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.box{
width:178px;
border:1px solid #ddd;
margin:5px;
padding:5px;
text-align:left;
float:left;
position:relative;
display:inline;
}
</style>
</head>
<body>
<div id="container" class="clearfix">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="box">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
</div>
<div class="box">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box">
<h2>Sit amet mi ullamcorper vehicula</h2>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p>
</div>
<div class="box">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div class="box">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box">
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. </p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. </p>
</div>
<div class="box">
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.</p>
</div>
<div class="box">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box">
<p>Morbi purus libero</p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. </p>
</div>
<div class="box">
<p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
</div>
<div class="box">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </p>
</div>
<div class="box">
<p>Sit amet mi ullamcorper vehicula</p>
</div>
<div class="box">
<h2>Morbi purus libero</h2>
</div>
<div class="box">
<p>Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</p>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
<div class="box">
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula</p>
</div>
<div class="box">
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, </p>
</div>
<div class="box">
<p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
</div>
<div style="clear:left"></div>
</div>
<script>
/*
* jquery瀑布流；
* IE8，FF,opera中测试可用，其他浏览器未测
* *******made by keimon**********
* *********2013-01-28*************
*/
//javascript 获得class值相同的元素；在jquery中可省去；
function getByClass(tagName,className){
var t = document.getElementsByTagName(tagName);
var arr=[];
for(var i=0; i<t.length; i++){
if(t[i].className==className){
arr.push(t[i]);
}
}
return arr;
}
//实现瀑布流；
//第一行的position值未设置，以后的position值设为‘absolute’，
//后面的元素根据每一个的高度判断添加到那一列；
function test(n){
var d = getByClass('div','box'); //可以直接用jquery的$('.box')来代替；
var h = []; // 用于存储每一列的高度；
for(var i=0; i<n; i++){
d[i].style.position='';
h[i]=$(d[i]).outerHeight(true); //若用原生js，则用offsetHeight，但还需要加上margin值；
}
var w = $(d[0]).outerWidth(true); //用第一个div的宽度代表所有div的宽度
for(var j=n; j<d.length; j++){
var minH = Math.min.apply({},h); //用于获得数据h中的最小值；
for(var k in h){ //用于获得数据h中最小值，所对应的标号；
if(h[k]==minH){
var index = k;
}
}
h[index] += $(d[j]).outerHeight(true); //每一列新增div后，获得的新总高度；
var styles = {
position:'absolute',
left:index*w,
top:minH
}
$(d[j]).css(styles);
}
}
test(4); //4代码有4列；
</script>
</body>
</html>
相关推荐
学习这两种瀑布流实现方式，开发者可以更好地理解和应用到实际项目中，提升用户体验。Flexbox和Grid布局适用于现代浏览器，能提供流畅的响应式设计；而jQuery插件如Masonry则提供了广泛支持和灵活性，尤其适用于需要...
实现移动端瀑布流布局可以分为CSS实现和JS实现两种方法。 CSS实现主要是用到一些专门的样式属性，实现起来简单，但是往往会有兼容性问题。例如使用column多列布局方法，可以使用column-count属性设置共有几列，...
瀑布流布局的关键在于元素的对齐方式，通常有顶部对齐和左对齐两种。顶部对齐意味着每一列的顶部保持水平，而左对齐则意味着每行的左边保持垂直。在自定义`LayoutManager`时，我们需要在添加新的视图时，找到适合...
瀑布流布局，也被称为无限滚动或Infinite Scroll，是一种在网页和移动应用中常见的内容展示方式，尤其在电商、社交和图片分享类应用中广泛使用。这种布局方式模仿了真实的瀑布，使得内容能够以多列的形式自上而下...
在Android中实现瀑布流效果，通常有两种主流方法：自定义ViewGroup和使用第三方库。下面将详细探讨这两种方法。 1. 自定义ViewGroup 自定义ViewGroup是最基础的方法，需要继承LinearLayout、GridView或者...
2. **CSS Flexbox或Grid布局**：这两种现代CSS布局模型可以方便地创建出瀑布流效果。Flexbox适用于一维布局，而Grid则更适合二维布局。它们能轻松处理元素的对齐、大小调整和自适应性，为实现瀑布流提供强大支持。 ...
实现瀑布流布局通常有两种方式：使用自定义ViewGroup或者使用第三方库如StaggeredGridLayoutManager（在Android Support Library或AndroidX中的RecyclerView组件）。自定义ViewGroup需要重写测量（onMeasure）和...
iOS平台上实现瀑布流布局，通常有两种方式：一是利用UIkit框架中的UICollectionView，二是借助第三方库如SDWebImage、WaterfallFlow等。 在iOS中，纯代码实现瀑布流主要涉及到以下几个关键步骤： 1. **创建...
本文将深入探讨iOS中实现瀑布流的几种主要方法。 1. 自定义UICollectionViewLayout UICollectionView是iOS中实现复杂布局的强大工具，瀑布流布局可以自定义UICollectionViewLayout来实现。首先，你需要继承...
瀑布流布局，也被称为瀑布流式布局或Masonry布局，是一种常见的网页和移动应用界面设计...通过查看这些文件，你可以深入理解这个简单的瀑布流实现方法，同时也可以作为学习和参考的素材，进一步提升自己的iOS开发技能。
对于数据的加载，你有两种选择：一次性加载所有数据，或者分页加载。一次性加载适用于数据量较小的情况，而分页加载则可以实现上拉加载更多，提高用户体验。在用户滚动到列表底部时，触发加载更多数据的逻辑。 在...
综上所述，"瀑布流实现 EgtMiles(仿path精美界面"这个项目涵盖了Android开发中的多个重要知识点，包括但不限于瀑布流布局的实现、自定义布局管理器、数据加载策略、界面设计原则以及性能优化技巧。这些内容对于...
1. **CSS3 Flexbox** 或 **Grid Layout**：这是两种现代CSS布局模式，可以方便地实现元素的自适应布局。Flexbox更适合一维布局，而Grid则支持二维布局，它们都可以帮助我们创建出灵活的瀑布流效果。 2. **...
瀑布流布局，也被称为Pinterest样式布局，是一种在Android应用中常用的设计模式，它以其独特的视觉效果，使得内容呈现更加生动和吸引人。这种布局方式的特点是各列的高度不固定，内容块按照一定的顺序自然下落，形成...
瀑布流布局，也被称为“Pinterest布局”，是一种在iOS应用中常用的设计模式，特别是在展示图片或者商品列表时。这种布局方式让视图中的元素能够自适应屏幕宽度，形成一种类似瀑布下落的效果，每一行的元素高度不固定...
下面将详细介绍这两种方法。 1. CSS Flexbox瀑布流： - `display: flex;`：设置容器为弹性布局。 - `flex-wrap: wrap;`：允许子元素换行，以适应不同尺寸的图片。 - `justify-content: space-between;` 或 `...
瀑布流布局在Android应用开发中是一种常见的展示方式，尤其在图片浏览、商品展示等场景下广泛应用。这种布局模仿了自然瀑布迭落的效果，使得屏幕上的元素可以不规则地分布，通常每一行的高度不同，形成一种视觉上的...
描述“一个自己测试玩玩的oc瀑布流代码”表明这可能是一个开发者为了学习、实践或者验证瀑布流实现的个人项目。瀑布流的实现涉及到计算每个单元格的大小、布局更新、滚动监听等多个技术点。 在标签“oc”中，我们...
1. CSS Flexbox 或 Grid：这两种现代布局模型提供了更强大的布局控制，可以轻松实现瀑布流的效果。Flexbox适用于一维布局，而Grid则适合二维布局，可以更好地适应各种屏幕尺寸。 2. JavaScript 插件：像Masonry和...
瀑布流布局，也被称为Pinterest布局，是网页设计中一种流行的方式，它使内容以美观、动态的方式呈现，常用于图片分享或社交媒体网站。jQuery Masonry是一款强大的JavaScript插件，能够帮助开发者轻松实现这种布局...