问答详情
源自：3-2 jQuery实现瀑布流布局的图片加载功能

关于缩小窗口的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;
}

当窗口缩小的时候 第一行右上角图片消失

http://img.mukewang.com/590c1deb0001cb5606960270.jpg

但把窗口最大化后，又恢复正常

在上一章节中，js实现里面我在问答里看到有人加了一段代码后解决了

http://img.mukewang.com/590c1e7a00015f1405750411.jpg

因此我仿照这个写了个jQuery的

http://img.mukewang.com/590c1ec00001329505190396.jpg

但是没有作用，请大神指点指点 如何解决这个问题，或是用其他方法来解决，谢谢

提问者：weibo_happy的小小明_0 2017-05-05 14:42

个回答

  • qq_MJ_7
    2017-06-07 22:48:27

    你改变页面大小时没执行函数，图片并没有消失，而是设置了绝对定位，被下面的图片覆盖了，你可以再加上$(window).resize事件，让窗口大小改变时，将第一行图片的绝对定位清除或重新设置

    0
  • A回不去的曾经
    2017-05-06 18:44:05

    我下载了老师的源代码，她的也是随着页面的改变列数也随之改变。问一下大佬吧！

    0
  • A回不去的曾经
    2017-05-05 18:51:13

    第二个main没有加#（main是id要加#，）

    这是我的代码，如果还有问题你可以看看。我刚刚接触jquery，不太会，共勉共勉！！！

    $(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();<!---获取第一个图片的宽度---->
        var cols = Math.floor($(window).width()/w);<!--获取列数--->
        $('#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;
    }

    0
  • A回不去的曾经
    2017-05-05 18:08:10

    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>
    你没有给div加类名。你看看是不是这个问题。

    0