瀑布流布局，等宽不等高jQuery
在百度上看见的好多都是引用Masonry插件 ，之后我自己尝试了一个没有使用插件的
<body>
<div >
<div class="box">
<div class="pic">
<img src="../picture/1.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/2.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/3.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/4.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/5.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/6.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/2.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/4.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/5.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/6.png">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../picture/2.png">
</div>
</div>
</div>
</body>下面是全部的css比较简单
<style>
* {
margin: 0;
padding: 0;
}
#main {
position: relative;
width: 900px;
margin: 0 auto;
}
.box {
padding: 15px 0 0 15px;
float: left;
}
.pic img {
width: 165px;
height: auto;
}
</style>最重要的这一段啦
<script>
$(window).on('load', function() {
waterfall();
var dataInt = {
"data": [{
"src": "../picture/1.png"
}, {
"src": "../picture/2.png"
}, {
"src": "../picture/3.png"
}]
};
})
function waterfall() {
var $boxs = $('#main>div');
var w = $boxs.eq(0).outerWidth();
var cols = Math.floor($(window).width() / w);
$('#main').width(w * cols).css('margin', '0 auto');
var hArr = [];
$boxs.each(function(index, value) {
var h = $boxs.eq(index).outerHeight();
if (index < cols) {
hArr[index] = h;
} else {
var minH = Math.min.apply(null, hArr);
var minHIndex = $.inArray(minH, hArr);
$(value).css({
'position': 'absolute',
'top': minH + 'px',
'left': minHIndex * w + 'px'
})
hArr[minHIndex] += $boxs.eq(index).outerHeight();
}
})
}
</script>下面这段jq 是可以根据鼠标轮播 下拉加载页面
<script>
$(window).on('load', function() {
waterfall();
var dataInt = {
"data": [{
"src": "../picture/1.png"
}, {
"src": "../picture/2.png"
}, {
"src": "../picture/3.png"
}]
};
$(window).on('scroll', function() {
if (checkScrollSlide) {
$.each(dataInt.data, function(key, value) {
var oBox = $('<div>').addClass('box').appendTo($('#main'));
var oPic = $('<div>').addClass('pic').appendTo($(oBox));
var oImg = $('<img>').attr('src', $(value).attr('src')).appendTo($(oPic));
})
waterfall();
}
})
})
function waterfall() {
var $boxs = $('#main>div');//包含选择器， 空格选择器会选择所有的子元素 ，> 取mian元素的第一个子元素
var w = $boxs.eq(0).outerWidth();// 列宽 width（）只能获得图片的宽度，outerWidth（）能获得包括边界的宽度 var cols = Math.floor($(window).width() / w);
$('#main').width(w * cols).css('margin', '0 auto');
var hArr = [];
$boxs.each(function(index, value) {
var h = $boxs.eq(index).outerHeight();// 获取每个图片的高
if (index < cols) {
hArr[index] = h;// 获取第一行的高度
} else {
var minH = Math.min.apply(null, hArr);// 获取最矮图片的索引
var minHIndex = $.inArray(minH, hArr);inArray函数能获取指定数值的索引
console.log(value);
$(value).css({
'position': 'absolute',
'top': minH + 'px',
'left': minHIndex * w + 'px'
})
hArr[minHIndex] += $boxs.eq(index).outerHeight();
}
})
}
function checkScrollSlide() {
var $lastBox = $('#main>div').last();// 获取最后一个图片
var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight() / 2);// 最后一个图片距离父元素的高度和自身一半的高度
var scrollTop = $(window).scrollTop();// 划过的高度
var documentH = $(window).height();//浏览器的高度
return (lastBoxDis < scrollTop + documentH) ? true : false;
}
</script>两个js的 区别：前者没有下拉加载效果 后者有下拉加载效果