虽然可以直接使用css实现瀑布流布局，但显示的方式有点问题，所以这儿就直接使用jquery+css来实现瀑布流布局，最终效果如下：
思路是通过将每个小块的position设置为relative，然后计算出在当前选择的列下应该上移的距离，然后设置div的top属性为该距离的负值，然后就达到了瀑布流的效果，代码如下：
<!DOCTYPE>
<html>
<head>
<title>vue demo</title>
<script src="js/jquery-3.2.1.js"></script>
<style>
body{
padding:0px;
margin:0px;
} .lv-masonry{
font-size:0px;
} .lv-masonry-2 .lv-masonry-item{
width:calc(50% - 2px - 10px);
} .lv-masonry-3 .lv-masonry-item{
width:calc(33.33% - 2px - 10px);
} .lv-masonry-4 .lv-masonry-item{
width:calc(25% - 2px - 10px);
} .lv-masonry-5 .lv-masonry-item{
width:calc(20% - 2px - 10px);
} .lv-masonry-item{
font-size:20px;
border:1px solid red;
display:inline-block;
margin:5px;
position:relative;
}
</style>
<script>
function Masonry(el){
this.el = el;
this.$el = $(el);
this.size = 0;
} Masonry.prototype = {
constructor:Masonry,
init: function(){
this.size = this.$el.find('.lv-masonry-item').length;
var heights = [{}];
for(var i=1; i<=this.size; i++){
var e = {};
var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')')
e.height = $e.height();
e.top = $e.offset().top;
heights.push(e);
}
var index = this.$el.attr("class").indexOf("lv-masonry-");
if(index > -1){
var clazz = this.$el.attr("class").substr(index);
index = clazz.indexOf(" ");
if(index > -1){
clazz = clazz.substr(0, index);
}
clazz = clazz.substr(clazz.lastIndexOf("-") + 1);
var start = parseInt(clazz);
if(!isNaN(start)){
var minpos = 1;
var mintop = heights[1].top;
for(var i=2; i<=start; i++){
if(mintop > heights[i].top){
minpos = i;
mintop = heights[i].top;
}
}
for(var i=1; i<=start; i++){
if(minpos != i){
var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')');
$e.css("top", -1 * (heights[i].top - mintop) + "px");
}
}
heights = [{}];
for(var i=1; i<=this.size; i++){
var e = {};
var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')')
e.height = $e.height();
e.top = $e.offset().top;
heights.push(e);
}
for(var i=start+1; i<=this.size; i++){
var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')');
var delta = 0;
var temp = i;
do{
delta += heights[temp-start].height + 10;
temp -= start;
}while(temp > start);
delta = heights[i].top - heights[temp].top - delta;
$e.css("top", -1 * delta + "px");
};
}
}
}
} $(function(){
var masonry = new Masonry('#masonry');
masonry.init();
});
</script>
</head>
<body>
<div class="lv-masonry lv-masonry-4" id="masonry">
<div class="lv-masonry-item" style="height:50px;">
1
</div>
<div class="lv-masonry-item" style="height:100px;">
2
</div>
<div class="lv-masonry-item" style="height:150px;">
3
</div>
<div class="lv-masonry-item" style="height:150px;">
4
</div>
<div class="lv-masonry-item" style="height:50px;">
5
</div>
<div class="lv-masonry-item" style="height:100px;">
6
</div>
<div class="lv-masonry-item" style="height:100px;">
7
</div>
<div class="lv-masonry-item" style="height:50px;">
8
</div>
<div class="lv-masonry-item" style="height:50px;">
9
</div>
<div class="lv-masonry-item" style="height:50px;">
10
</div>
</div>
</body>
</html>
masonry.html
代码中仅实现了两列、三列、四列和五列的布局，如果要增加其他的就添加类似如下的css代码即可：
在使用的时候要指定列，示例如下：
然后在jquery的loag方法中添加
var masonry = new Masonry('#masonry');
masonry.init();
便可使用瀑布流布局。