瀑布流

瀑布流

jQuery 瀑布流可以这样写

javascript/jQueryboloog 发表了文章 • 0 个评论 • 1357 次浏览 • 2017-05-04 09:56 • 来自相关话题

瀑布流实现原理
?
固定每一个item的宽度根据父级绝对定位js计算每一行可以排列几个 (父级总宽度 / item)= 排列个数写一个空数组 循环保存每一行的下标高度循环所有item获取当前行最小的高度和索引,改变当前的left和top会用到left的值就是当前索引*item的宽度top的值就是当前索引的高度计算完以后重置当前索引的高度elHeight[minIndex]+= 当前的高度,依次循环就可以了浏览器缩放时添加一个resize再从第三部重新计算宽度,然后循环数据,调整样式
?
实例代码
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Waterfall flow</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
input,button,select,textarea{
outline:none;border: none;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
img{
border: none;
}
.wrap {
position: relative;
min-width: 440px;
width: 90%;
margin: 0 auto;
}
.item {
width: 200px;
margin: 10px;
position: absolute;
transition: all .6s ease-out;
font-size: 50px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap"></div>
<script src="https://cdn.bootcss.com/jquery ... gt%3B
<script>
var WaterFall = {
init: function(){
// 添加 item 盒子
this.addItem();
// 添加好盒子就开始布局
this.layout();
// 改变窗口时执行
this.resize();
},
addItem: function(){
var wrap = $('.wrap');
// 生成30个div 随机高度 和 颜色
var item = '';
for (var i = 0; i < 30; i++) {
item +='<div class="item" style="height:'+parseInt(Math.random() * 100 + 230)+'px;background-color:'+this.getRandColor()+'">'+i+'</div>';
}
wrap.append(item);
},
layout: function(){
var elHeight = [];
// 计算每一行可以存放几个 item 总宽 / item宽度
var countWidth = Math.floor( $('.wrap').width() / $('.item').width());
// 初始化添加 第一行高度的下标
for (var i = 0; i < countWidth; i++) {
elHeight[i] = 0;
}
// 循环 所有item
$('.item').each(function(index, el) {
// apply 传入数组 取得最小的高度
var minValue = Math.min.apply(null, elHeight);
console.log(minValue)
// 然后获取当前高度的索引
var minIndex = elHeight.indexOf(minValue)
// 修改当前的top 和 left
$(this).css({
top: elHeight[minIndex], // 获取当前索引对应的高度
left: $(this).outerWidth(true) * minIndex // 当前的left值为 索引 * 宽度(位于第几个)
})
// 当前索引的高度 += 当前 item 的高度 (比如计算第二排高度时, 就等于上一个的 top + 当前的高度)elHeight[0] += 90 下一次高度就为90
elHeight[minIndex] += $(this).outerHeight(true);
});
},
resize: function(){
$(window).resize(function() {
WaterFall.layout();
});
},
getRandColor: function(){
var str = '1234567890abcdef';
var colorStr = '#';
for(var i =0; i < 6; i++){
colorStr += str[ Math.floor(Math.random() * str.length) ];
}
return colorStr;
}
}
WaterFall.init(); // 执行
</script>
</body>
</html>
在线查看
?
总结

瀑布流布局实现了,在数据多的情况下没有做分页加载数据,后续会补充。
?
? 查看全部
瀑布流实现原理
?
  • 固定每一个item的宽度
  • 根据父级绝对定位
  • js计算每一行可以排列几个 (父级总宽度 / item)= 排列个数
  • 写一个空数组 循环保存每一行的下标高度
  • 循环所有item获取当前行最小的高度和索引,改变当前的left和top会用到
  • left的值就是当前索引*item的宽度
  • top的值就是当前索引的高度
  • 计算完以后重置当前索引的高度elHeight[minIndex]+= 当前的高度,依次循环就可以了
  • 浏览器缩放时添加一个resize再从第三部重新计算宽度,然后循环数据,调整样式

?
实例代码
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Waterfall flow</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
input,button,select,textarea{
outline:none;border: none;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
img{
border: none;
}
.wrap {
position: relative;
min-width: 440px;
width: 90%;
margin: 0 auto;
}
.item {
width: 200px;
margin: 10px;
position: absolute;
transition: all .6s ease-out;
font-size: 50px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap"></div>
<script src="https://cdn.bootcss.com/jquery ... gt%3B
<script>
var WaterFall = {
init: function(){
// 添加 item 盒子
this.addItem();
// 添加好盒子就开始布局
this.layout();
// 改变窗口时执行
this.resize();
},
addItem: function(){
var wrap = $('.wrap');
// 生成30个div 随机高度 和 颜色
var item = '';
for (var i = 0; i < 30; i++) {
item +='<div class="item" style="height:'+parseInt(Math.random() * 100 + 230)+'px;background-color:'+this.getRandColor()+'">'+i+'</div>';
}
wrap.append(item);
},
layout: function(){
var elHeight = [];
// 计算每一行可以存放几个 item 总宽 / item宽度
var countWidth = Math.floor( $('.wrap').width() / $('.item').width());
// 初始化添加 第一行高度的下标
for (var i = 0; i < countWidth; i++) {
elHeight[i] = 0;
}
// 循环 所有item
$('.item').each(function(index, el) {
// apply 传入数组 取得最小的高度
var minValue = Math.min.apply(null, elHeight);
console.log(minValue)
// 然后获取当前高度的索引
var minIndex = elHeight.indexOf(minValue)
// 修改当前的top 和 left
$(this).css({
top: elHeight[minIndex], // 获取当前索引对应的高度
left: $(this).outerWidth(true) * minIndex // 当前的left值为 索引 * 宽度(位于第几个)
})
// 当前索引的高度 += 当前 item 的高度 (比如计算第二排高度时, 就等于上一个的 top + 当前的高度)elHeight[0] += 90 下一次高度就为90
elHeight[minIndex] += $(this).outerHeight(true);
});
},
resize: function(){
$(window).resize(function() {
WaterFall.layout();
});
},
getRandColor: function(){
var str = '1234567890abcdef';
var colorStr = '#';
for(var i =0; i < 6; i++){
colorStr += str[ Math.floor(Math.random() * str.length) ];
}
return colorStr;
}
}
WaterFall.init(); // 执行
</script>
</body>
</html>

在线查看
?
总结

瀑布流布局实现了,在数据多的情况下没有做分页加载数据,后续会补充。
?
?

jQuery 瀑布流可以这样写

javascript/jQueryboloog 发表了文章 • 0 个评论 • 1357 次浏览 • 2017-05-04 09:56 • 来自相关话题

瀑布流实现原理
?
固定每一个item的宽度根据父级绝对定位js计算每一行可以排列几个 (父级总宽度 / item)= 排列个数写一个空数组 循环保存每一行的下标高度循环所有item获取当前行最小的高度和索引,改变当前的left和top会用到left的值就是当前索引*item的宽度top的值就是当前索引的高度计算完以后重置当前索引的高度elHeight[minIndex]+= 当前的高度,依次循环就可以了浏览器缩放时添加一个resize再从第三部重新计算宽度,然后循环数据,调整样式
?
实例代码
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Waterfall flow</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
input,button,select,textarea{
outline:none;border: none;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
img{
border: none;
}
.wrap {
position: relative;
min-width: 440px;
width: 90%;
margin: 0 auto;
}
.item {
width: 200px;
margin: 10px;
position: absolute;
transition: all .6s ease-out;
font-size: 50px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap"></div>
<script src="https://cdn.bootcss.com/jquery ... gt%3B
<script>
var WaterFall = {
init: function(){
// 添加 item 盒子
this.addItem();
// 添加好盒子就开始布局
this.layout();
// 改变窗口时执行
this.resize();
},
addItem: function(){
var wrap = $('.wrap');
// 生成30个div 随机高度 和 颜色
var item = '';
for (var i = 0; i < 30; i++) {
item +='<div class="item" style="height:'+parseInt(Math.random() * 100 + 230)+'px;background-color:'+this.getRandColor()+'">'+i+'</div>';
}
wrap.append(item);
},
layout: function(){
var elHeight = [];
// 计算每一行可以存放几个 item 总宽 / item宽度
var countWidth = Math.floor( $('.wrap').width() / $('.item').width());
// 初始化添加 第一行高度的下标
for (var i = 0; i < countWidth; i++) {
elHeight[i] = 0;
}
// 循环 所有item
$('.item').each(function(index, el) {
// apply 传入数组 取得最小的高度
var minValue = Math.min.apply(null, elHeight);
console.log(minValue)
// 然后获取当前高度的索引
var minIndex = elHeight.indexOf(minValue)
// 修改当前的top 和 left
$(this).css({
top: elHeight[minIndex], // 获取当前索引对应的高度
left: $(this).outerWidth(true) * minIndex // 当前的left值为 索引 * 宽度(位于第几个)
})
// 当前索引的高度 += 当前 item 的高度 (比如计算第二排高度时, 就等于上一个的 top + 当前的高度)elHeight[0] += 90 下一次高度就为90
elHeight[minIndex] += $(this).outerHeight(true);
});
},
resize: function(){
$(window).resize(function() {
WaterFall.layout();
});
},
getRandColor: function(){
var str = '1234567890abcdef';
var colorStr = '#';
for(var i =0; i < 6; i++){
colorStr += str[ Math.floor(Math.random() * str.length) ];
}
return colorStr;
}
}
WaterFall.init(); // 执行
</script>
</body>
</html>
在线查看
?
总结

瀑布流布局实现了,在数据多的情况下没有做分页加载数据,后续会补充。
?
? 查看全部
瀑布流实现原理
?
  • 固定每一个item的宽度
  • 根据父级绝对定位
  • js计算每一行可以排列几个 (父级总宽度 / item)= 排列个数
  • 写一个空数组 循环保存每一行的下标高度
  • 循环所有item获取当前行最小的高度和索引,改变当前的left和top会用到
  • left的值就是当前索引*item的宽度
  • top的值就是当前索引的高度
  • 计算完以后重置当前索引的高度elHeight[minIndex]+= 当前的高度,依次循环就可以了
  • 浏览器缩放时添加一个resize再从第三部重新计算宽度,然后循环数据,调整样式

?
实例代码
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Waterfall flow</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
input,button,select,textarea{
outline:none;border: none;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
img{
border: none;
}
.wrap {
position: relative;
min-width: 440px;
width: 90%;
margin: 0 auto;
}
.item {
width: 200px;
margin: 10px;
position: absolute;
transition: all .6s ease-out;
font-size: 50px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap"></div>
<script src="https://cdn.bootcss.com/jquery ... gt%3B
<script>
var WaterFall = {
init: function(){
// 添加 item 盒子
this.addItem();
// 添加好盒子就开始布局
this.layout();
// 改变窗口时执行
this.resize();
},
addItem: function(){
var wrap = $('.wrap');
// 生成30个div 随机高度 和 颜色
var item = '';
for (var i = 0; i < 30; i++) {
item +='<div class="item" style="height:'+parseInt(Math.random() * 100 + 230)+'px;background-color:'+this.getRandColor()+'">'+i+'</div>';
}
wrap.append(item);
},
layout: function(){
var elHeight = [];
// 计算每一行可以存放几个 item 总宽 / item宽度
var countWidth = Math.floor( $('.wrap').width() / $('.item').width());
// 初始化添加 第一行高度的下标
for (var i = 0; i < countWidth; i++) {
elHeight[i] = 0;
}
// 循环 所有item
$('.item').each(function(index, el) {
// apply 传入数组 取得最小的高度
var minValue = Math.min.apply(null, elHeight);
console.log(minValue)
// 然后获取当前高度的索引
var minIndex = elHeight.indexOf(minValue)
// 修改当前的top 和 left
$(this).css({
top: elHeight[minIndex], // 获取当前索引对应的高度
left: $(this).outerWidth(true) * minIndex // 当前的left值为 索引 * 宽度(位于第几个)
})
// 当前索引的高度 += 当前 item 的高度 (比如计算第二排高度时, 就等于上一个的 top + 当前的高度)elHeight[0] += 90 下一次高度就为90
elHeight[minIndex] += $(this).outerHeight(true);
});
},
resize: function(){
$(window).resize(function() {
WaterFall.layout();
});
},
getRandColor: function(){
var str = '1234567890abcdef';
var colorStr = '#';
for(var i =0; i < 6; i++){
colorStr += str[ Math.floor(Math.random() * str.length) ];
}
return colorStr;
}
}
WaterFall.init(); // 执行
</script>
</body>
</html>

在线查看
?
总结

瀑布流布局实现了,在数据多的情况下没有做分页加载数据,后续会补充。
?
?