OK，
我们接到上一篇瀑布流的实现，下面我们来讲讲不固定列的实现瀑布流
像花瓣网，百度图片的实现方式一样。
根据调整窗口也就是可视区的大小来改变显示图片的列数。同时也有个运动的效果。
实现原理：
布局：有一个容器，为相对定位，里面的img为绝对定位。
数据添加：因为每张图片的宽度是固定的，高度是不固定的。所以我们先要算出可视区的宽度能放下几列图片，然后在算出每列图片的高度，由高度最低的那列在添加下一张图片，我们用一张图片来形象说明下：
这一种实现可谓是最优的一种方案，方便添加数据内容，窗口变化，列数会自动调整。
OK那么下面就给出实现的代码吧，用jquery来实现的。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>瀑布流</title>
<style>
* {margin: 0; padding: 0;}
#container { width: 1000px; border: 1px solid red; position: relative; margin: 50px auto 0; }
#container img { position: absolute; }
#loader { width: 100%; height: 60px; background: url('loader.gif') no-repeat center #FFF; position: fixed; bottom: 0; left: 0; display: none; }
</style>
<script src="jquery-1.9.1.min.js"></script>
<script>
/*
不固定列：定位
根据可视区调整列数（非固定列数）
怎么添加数据的呢，每列图片添加好之后，在算出每列的高度，下一张图片添加到高度最低的那一列的下面。
*/
$(function() {
//计算列
var oContainer = $('#container');
var oLoader = $('#loader');
var iCells = 0;//总列
var iWidth = 200;//每列宽度
var iSpace = 10;//间隔宽
var iOuterWidth = iWidth + iSpace;//实际列宽
var sUrl = 'http://www.wookmark.com/api/json/popular?callback=?';
var arrT = [];
var arrL = [];
var iPage = 0;//一开始加载第一页的数据
var iBtn = true;
function setCell() {//计算可视区有多少列
iCells = Math.floor($(window).innerWidth() / iOuterWidth);
//列数固定在3到6列之间，避免列数太多太卡。
if (iCells < 3) {
iCells = 3;
} else if (iCells > 6) {
iCells = 6;
}
//alert(iCells);
oContainer.css('width', iCells * iOuterWidth) - 10;//占位宽度
}
setCell();
for (var i=0; i<iCells; i++) {
arrT[i] = 0;
arrL[i] = iOuterWidth * i;
}
//console.log(iCells);
//console.log(arrL);
function getData() {
if (!iBtn) {
return ;
}
iBtn = false;
iPage++;//加载一批显示一批
oLoader.show();//数据加载完成之前显示转圈loading
$.getJSON(sUrl, {page:iPage}, function(jData) {
//$('#loader').show();
$.each(jData, function(index, obj) {//循环数据
var oImg = $('<img />');
//宽高
var iHeight = obj.height * (iWidth / obj.width);
oImg.css({
width : iWidth,
height : iHeight
});
//获取arrT最小值的位置
var _index = getMin();
//设置定位
oImg.css({
left : arrL[_index],
top : arrT[_index]
});
arrT[_index] += iHeight + 10;
oContainer.append(oImg);
var objImg = new Image();
objImg.onload = function() {
oImg.attr('src', this.src);
}
objImg.src = obj.preview;
/*setTimeout(function() {
$('#loader').hide();
},1000)*/
iBtn = true;
oLoader.hide();//数据加载完成之后隐藏转圈loading
})
});
}
getData();//初始化的时候调用一次
//arrT = [11,23,5,7];
//获取数据中最小值的位置
function getMin() {
var v = arrT[0];
var _index = 0;
for (var i=1; i<arrT.length; i++) {
if (arrT[i] < v) {
v = arrT[i];
_index = i;
}
}
return _index;
}
//alert(getMin());
//滚动条的滚动事件
$(window).on('scroll', function() {
var _index =getMin();
var iH = $(window).scrollTop() + $(window).innerHeight();
//document.title = iH + ':' + (arrT[_index] + oContainer.offset().top);
if (arrT[_index] + oContainer.offset().top < iH) {
//alert(1);
iPage++;
getData();
}
})
$(window).on('resize', function() {
var iLen = iCells;
setCell();
if (iLen == iCells) {
return ;
}
arrT = [];
arrL = [];
for (var i=0; i<iCells; i++) {
arrT[i] = 0;
arrL[i] = iOuterWidth * i;
}
oContainer.find('img').each(function() {
var _index = getMin();
/*$(this).css({
left : arrL[_index],
top : arrT[_index]
});*/
$(this).animate({
left : arrL[_index],
top : arrT[_index]
}, 1000);
arrT[_index] += $(this).height() + 10;
});
})
})
</script>
</head>
<body>
<div id="container"></div>
<div id="loader"></div>
</body>
</html>
可以复制代码到本地试试体验效果如何
不错就给赞吧！
相关推荐
首先，我们需要理解瀑布流布局的基本原理。通常，瀑布流布局通过JavaScript或CSS来实现。CSS主要负责元素的基础样式和布局，而JavaScript则处理动态加载和布局计算。在等宽瀑布流中，每个照片单元格的宽度是固定的，...
2. **实现原理** - **核心思想**：通过计算每个元素的高度，动态调整它们的位置，使得每一列看起来像一个瀑布一样流淌。 - **分块处理**：通常将屏幕分成多个列，每个列独立计算和加载内容，避免一次性加载所有...
瀑布流布局，也称为Pinterest布局，是一种常见的图片展示方式，它的特点是每一列的图片高度不固定，根据图片内容自动调整，而列与列之间保持对齐。 首先，我们需要理解RecyclerView的工作原理。RecyclerView通过...
- **第三方库**：如PinnedSectionLibrary、GlideGridLayoutManager等，它们提供了更便捷的瀑布流实现方式，同时可能包含额外的功能，如分组、固定头部等。 在代码实现时，你需要注意以下几点： 1. **数据结构**：...
瀑布流布局是一种常见的网页和移动应用设计模式，它的特点是每个单元格的宽度相同，但高度不固定，模拟出类似瀑布倾泻而下的视觉效果。在RecyclerView中实现瀑布流，通常需要配合其他库如StaggeredGridLayoutManager...
一、瀑布流布局的基本原理 1. 确定列数：首先，我们需要确定页面的列数。这通常基于窗口宽度和每个元素的预设宽度。 2. 分配元素：将所有元素分配到各个列中，使每列尽可能保持等高。当一个列的高度超过其他列时，新...
原生JavaScript实现瀑布流效果，不依赖任何第三方库，可以更好地控制性能和兼容性，对于开发者来说是一次有趣的挑战。 首先，我们需要理解瀑布流的核心原理。瀑布流布局的关键在于计算每个元素的宽度和位置，使它们...
瀑布流布局，也被称为瀑布流式布局或Masonry布局，是一种常见的网页和移动应用界面设计...通过查看这些文件，你可以深入理解这个简单的瀑布流实现方法，同时也可以作为学习和参考的素材，进一步提升自己的iOS开发技能。
这种布局方式最初由Pinterest网站引入，其特点是页面元素（如图片）按照网格排列，每一列的高度不固定，新元素会填充到最短的列中，形成一种类似瀑布下落的效果。 在安卓开发中实现瀑布流，通常涉及到以下几个关键...
通过深入学习和实践这个"特效源码瀑布流demo"，你可以掌握瀑布流布局的核心原理和实现技巧，并将其应用到自己的项目中，提升网页的视觉效果和用户体验。无论是初学者还是经验丰富的开发者，都能从中受益。
瀑布流布局是一种常见的网页设计模式，它以一种不规则的方式排列元素，使页面看起来像一个瀑布一样逐级下降。在JavaScript库中，jQuery是广泛使用的工具之一，它提供了丰富的API来帮助开发者实现各种动态效果。本篇...
瀑布流布局，也被称为Masonry布局，是一种常用于图片展示或商品列表的布局方式，它模仿了瀑布下落的效果，每一列的元素自上而下排列，每列的高度不固定，根据内容自动调整。这种布局在网页设计和移动应用开发中非常...
3. **高度计算**：由于瀑布流的特性，左侧列可能会比右侧列高，因此需要JavaScript来动态计算每列的高度，确保每列的高度一致。 **三、JavaScript实现动态加载** 1. **加载更多按钮**：在页面底部添加“加载更多”...
5. **计算列宽和元素高度**：在瀑布流布局中，每个元素的宽度是固定的，但高度因内容不同而变化。需要通过JavaScript计算每列的高度，确保新添加的元素能正确地填充到最短的列中。 6. **响应式设计**：为了适配不同...
瀑布流布局，也被称为Masonry布局，是一种网页布局方式，常用于图片展示，使得页面在有限的空间内，图片可以自适应地填充，形成一种类似瀑布的效果，每列的高度不固定，根据内容自动调整。这种布局方式能充分利用...
Vuewaterfallcomponent 是一个基于 Vue.js 的瀑布流组件，它实现了瀑布流布局和无限滚动加载功能，使得在网页上展示大量多列内容时，用户可以流畅地浏览并加载更多内容。 瀑布流布局（Masonry Layout）是一种常见的...
本篇文章将深入探讨Android版的瀑布流布局，包括其原理、实现方式以及相关的技术点。 首先，我们需要理解瀑布流布局的基本概念。在瀑布流布局中，元素（通常为图片或卡片）沿垂直方向排列，每一行的元素数量可能...
1. 瀑布流布局原理和实现：如何根据图片数量和屏幕尺寸动态调整图片的列数和位置。 2. jQuery的使用：如何利用jQuery选择器、事件绑定和DOM操作实现图片的加载和布局更新。 3. CSS3动画和过渡：如何利用CSS3的动画和...
瀑布流布局的特点是每一列的高度不固定，根据内容自适应，使得视觉效果更加生动，用户体验更佳。在本案例中，我们讨论的是如何在Android中实现瀑布流ListView，并且它已经集成了上拉刷新和下拉分页功能，以提供更...
在CSS中，我们可以利用多列布局（Multi-column layout）来实现瀑布流效果。主要的CSS属性有column-width、column-gap和column-count。column-width定义了列的宽度，column-gap定义了列与列之间的间隔，而column-...