關(guān)于縮小窗口的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;
}
/*?設(shè)置圖片與圖片之間的間距?用padding?是因?yàn)楹竺鏁?huì)用到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創(chuàng)建元素
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");
//見(jiàn)前端收藏
var?w=$boxs.eq(0).outerWidth();?
//width()括號(hào)內(nèi)沒(méi)值就是獲取?有值就是設(shè)置元素寬度
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);
//在數(shù)組中尋找某元素的下標(biāo)
var?minHIndex=$.inArray(minH,?hArr);
//value中是DOM對(duì)象，需要轉(zhuǎn)變成jQuery對(duì)象才能調(diào)用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最后一個(gè)圖片框距離頂部的距離
var?lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
var?scrollTop=$(window).scrollTop();
var?documentH=$(window).height();
return?(lastBoxDis<scrollTop+documentH)?true:false;
}當(dāng)窗口縮小的時(shí)候 第一行右上角圖片消失
但把窗口最大化后，又恢復(fù)正常
在上一章節(jié)中，js實(shí)現(xiàn)里面我在問(wèn)答里看到有人加了一段代碼后解決了
因此我仿照這個(gè)寫(xiě)了個(gè)jQuery的
但是沒(méi)有作用，請(qǐng)大神指點(diǎn)指點(diǎn) 如何解決這個(gè)問(wèn)題，或是用其他方法來(lái)解決，謝謝
2017-06-07
你改變頁(yè)面大小時(shí)沒(méi)執(zhí)行函數(shù)，圖片并沒(méi)有消失，而是設(shè)置了絕對(duì)定位，被下面的圖片覆蓋了，你可以再加上$(window).resize事件，讓窗口大小改變時(shí)，將第一行圖片的絕對(duì)定位清除或重新設(shè)置
2017-05-06
我下載了老師的源代碼，她的也是隨著頁(yè)面的改變列數(shù)也隨之改變。問(wèn)一下大佬吧！
2017-05-05
第二個(gè)main沒(méi)有加#（main是id要加#，）
這是我的代碼，如果還有問(wèn)題你可以看看。我剛剛接觸jquery，不太會(huì)，共勉共勉?。?！
$(window).on('load',function(){
?? ?waterfall();
?? ?var dataInt = {"data":[{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'}]};
?? ?$(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));
?? ??? ??? ??? ?$('<img>').attr('src','img/'+$(value).attr('src')).appendTo($(oPic));
?? ??? ??? ??? ?
?? ??? ??? ?})
?? ??? ??? ?waterfall();
?? ??? ?}
?? ?})
})
function waterfall(){
?? ?var $boxs = $('#main>div');
?? ?var w = $boxs.eq(0).outerWidth();<!---獲取第一個(gè)圖片的寬度---->
?? ?var cols = Math.floor($(window).width()/w);<!--獲取列數(shù)--->
?? ?$('#main').width(w*cols).css('margin','0 auto');
?? ?var hArr = [];
?? ?$boxs.each(function(index, value) {
?? ??? ?//console.log(index);
?? ??? ?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();
?? ??? ?}
??? });
?? ?
}
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;
}
2017-05-05
body>
?? ?<div id="main">
?? ??? ?<div class="box">
?????? ??? ?<div class="pic">
?????????? ??? ?<img src="img/1.jpg">
??????????? </div>
??????? </div>
??????? <div class="box">
?????? ??? ?<div class="pic">
?????????? ??? ?<img src="img/2.jpg">
??????????? </div>
??????? </div>
你沒(méi)有給div加類(lèi)名。你看看是不是這個(gè)問(wèn)題。