关于缩小窗口的bug
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery瀑布流</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jquery-3.2.0.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div id="main"> <div> <div> <img src="images/0.jpg" /> </div> </div> <div> <div> <img src="images/1.jpg" /> </div> </div> <div> <div> <img src="images/2.jpg" /> </div> </div> <div> <div> <img src="images/3.jpg" /> </div> </div> <div> <div> <img src="images/4.jpg" /> </div> </div> <div> <div> <img src="images/5.jpg" /> </div> </div> <div> <div> <img src="images/6.jpg" /> </div> </div> <div> <div> <img src="images/7.jpg" /> </div> </div> <div> <div> <img src="images/8.jpg" /> </div> </div> <div> <div> <img src="images/9.jpg" /> </div> </div> <div> <div> <img src="images/10.jpg" /> </div> </div> <div> <div> <img src="images/11.jpg" /> </div> </div> <div> <div> <img src="images/12.jpg" /> </div> </div> <div> <div> <img src="images/13.jpg" /> </div> </div> <div> <div> <img src="images/14.jpg" /> </div> </div> <div> <div> <img src="images/15.jpg" /> </div> </div> <div> <div> <img src="images/16.jpg" /> </div> </div> </div> </body> </html>
*{
margin: 0;
padding: 0;
}
#main{
position: relative;
}
/* 设置图片与图片之间的间距 用padding 是因为后面会用到offsetHeight 该属性不能获取margin */
.box{
padding: 15px 0 0 15px;
float: left;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.box img{
width: 162px;
height: auto;
}$(window).on("load",function(){
waterfall();
var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]};
$(window).on("scroll",function(){
if(checkScrollSlide()){
$.each(dataInt.data,function(key,value){
//jQuery创建元素
var oBox=$("<div>").addClass("box").appendTo($("#main"));
var oPic=$("<div>").addClass('pic').appendTo($(oBox));
$("<img>").attr("src","./images/"+$(value).attr("src")).appendTo($(oPic));
});
waterfall();
}
});
});
function waterfall(){
var $boxs=$("#main>div");
//见前端收藏
var w=$boxs.eq(0).outerWidth();
//width()括号内没值就是获取 有值就是设置元素宽度
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中是DOM对象，需要转变成jQuery对象才能调用css方法
$(value).css({
"position":"absolute",
"top":minH+"px",
"left":minHIndex*w+"px"
});
hArr[minHIndex]+=$boxs.eq(index).outerHeight();
}
})
}
function checkScrollSlide(){
var $lastBox=$("#main>div").last();
//offset().top最后一个图片框距离顶部的距离
var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
var scrollTop=$(window).scrollTop();
var documentH=$(window).height();
return (lastBoxDis<scrollTop+documentH)?true:false;
}当窗口缩小的时候 第一行右上角图片消失
但把窗口最大化后，又恢复正常
在上一章节中，js实现里面我在问答里看到有人加了一段代码后解决了
因此我仿照这个写了个jQuery的
但是没有作用，请大神指点指点 如何解决这个问题，或是用其他方法来解决，谢谢
