为什么我的图片会重叠？打印出的最小高度min为什么会是55px?一脸懵逼
misses
2016-05-06 18:07
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JQ实现瀑布流布局</title>
<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
<script src="JQscript.js"></script>
</head>
<body>
<div id="main">
<div class="out">
<div class="in">
<img src="images/1.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/2.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/3.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/4.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/5.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/6.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/7.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/8.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/9.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/10.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/4.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/5.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/3.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/1.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/7.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/5.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/10.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/6.jpg"/>
</div>
</div>
<div class="out">
<div class="in">
<img src="images/9.jpg"/>
</div>
</div>
</div>
</body>
</html>
$(function(){
waterFall();
//模拟得到的后台数据
var data = [{"src":"images/1.jpg"},{"src":"images/4.jpg"},{"src":"images/3.jpg"},{"src":"images/8.jpg"},{"src":"images/7.jpg"},{"src":"images/7.jpg"},{"src":"images/7.jpg"},{"src":"images/7.jpg"},{"src":"images/7.jpg"}]
//如果达到了加载条件
$(window).scroll(function(){
if(ScrollOver()==true){
for(var i=0;i<data.length;i++)
{
var out =$('<div class="out"></div>');
$("#main").append(out);
var inn =$('<div class="in"></div>');
out.append(inn);
var img=$("<img />");
img.attr("src",data[i].src);
inn.append(img);
}
waterFall();
}
})
})
//主要函数
function waterFall(){
var $Boxs = $("#main>div");
var cols=Math.floor($(window).width()/$Boxs.eq(0).outerWidth());//浏览器视口,自适应的列数
$("#main").css({'width':cols*$Boxs.eq(0).outerWidth()+'px','margin':'0 auto'});//使整体居中
var colHt=[];//存储各列的总高度
$Boxs.each(function(index,value){
if(index<cols){
colHt[index]=$Boxs.eq(index).outerHeight();
}
else{
var min = Math.min.apply(null,colHt);
console.log(min);
var minIndex= $.inArray(min,colHt);
$(value).css({'position':'absolute','top':min+'px','left':minIndex*$Boxs.eq(0).outerWidth()+'px'});
//更新
colHt[minIndex]+=$Boxs.eq(index).outerHeight();
}
})
}
//判断是否达到加载图片的要求
//滚动距离+视口高度>=offsetTop
function ScrollOver(){
var oBoxes = $("#main>div")
var scrollH=$(document).scrollTop();
var H1=$(window).height()+scrollH;
var H2=oBoxes.eq(oBoxes.length-1).outerHeight();
return (H1 >= H2) ? true : false;
}
3回答
-
- 慕码人2558543
- 2016-05-14 21:26:53
开头得像老师写的那样，$(window).on("load",function{
}),就是等图片加载完再运行函数
-
- 慕UI3822588
- 2016-05-13 17:01:34
我的也是
-
- Siming0
- 2016-05-07 13:11:34
我的也是，求答案
瀑布流布局
97759 学习 · 736 问题
相似问题