jquery实现瀑布流效果

最新推荐文章于 2024-09-16 08:47:17 发布

weixin_30384031

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量68

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/zhujiasheng/p/6132166.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>nav-head</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}
        .pull-list{
        	padding:5px;
        	font-size:0;
        	position:relative;
        }
        .pull-list .pull-box{
        	display:inline-block;
        	float:left;
        }
        .pboder{
        	border:1px solid #ccc;
        	padding:5px;
        	margin:5px;
        	font-size:12px;
        }
        img{
        	width:140px;
        }
	</style>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<body>
	<div class="pull-list clearfix">
		<div class="pull-box">
			<div class="pboder">
			<img src="image/1.jpg">
				
			</div>
		</div>
		<div class="pull-box">
			<div class="pboder">
			<img src="image/2.jpg">
				
			</div>
		</div>
		<div class="pull-box">
			<div class="pboder">
			<img src="image/3.jpg">
				
			</div>
		</div>
		<div class="pull-box">
			<div class="pboder">
			<img src="image/4.jpg">
			</div>
		</div>
		<div class="pull-box">
			<div class="pboder">
			<img src="image/4.jpg">
			</div>
		</div>
		<div class="pull-box">
			<div class="pboder">
			<img src="image/5.jpg">
			</div>
		</div>
		<div class="pull-box">
			<div class="pboder">
			<img src="image/6.jpg">
			</div>
		</div>
		<div class="pull-box">
			<div class="pboder">
			<img src="image/7.jpg">
			</div>
		</div>
	    <div class="pull-box">
			<div class="pboder">
			<img src="image/8.jpg">
			</div>
		</div>
	    <div class="pull-box">
			<div class="pboder">
			<img src="image/9.jpg">
			</div>
		</div>
	    <div class="pull-box">
			<div class="pboder">
			<img src="image/10.jpg">
			</div>
		</div>
	
	</div>
    <script src="jquery.min.js"></script>
	<script>
	  $(window).on("load",function(){
	  	function getSlist(){
	  		  var docW = $(window).width(),
	  		      boxW = $('.pull-box').eq(0).outerWidth(),
	  		      boxL = Math.floor(docW/boxW);
	  		      $(".pull-list").css({
	  		      	  "margin":"0 auto",
	  		      	  "width":boxW*boxL
	  		      })
	  		  var arrBox = [];
	  		      $('.pull-box').each(function(key,val){
	  		      	    var boxH = $(val).outerHeight();
	  		      	    if(key<boxL){
	  		      	       arrBox[key] = boxH;
	  		      	    }else{
	  		      	    	var minH = Math.min.apply(null,arrBox);
	  		      	    	var minIndex =$.inArray(minH,arrBox);
	  		      	    	$(val).css({
	  		      	    		"position":"absolute",
	  		      	    		"left":(minIndex*boxW+5)+"px",
	  		      	    		"top":(minH+5)+"px"
	  		      	    	})
	  		      	        arrBox[minIndex] += $('.pull-box').eq(key).outerHeight();
	  		      	    }
	  		      	   
	  		      })
	  	}
	  	getSlist();
        
        function checkScroll(){
       	   	   $(window).scroll(function(){
       	   	  	  if($(document).height() < $(window).height() + parseInt($(window).scrollTop(),10) + 50){
       	   	  	        $.ajax({
       	   	  	        	url:"text.json",
       	   	  	        	method:"GET",
       	   	  	        	success:function(data){
       	                    	var res = data.list;
       	                       var str = "";
       	                    	for(var i=0; i<res.length; i++){
       	                    		str ='<div class="pull-box">'+
       	                    		'			<div class="pboder">'+
       	                    		'			<img src="image/'+res[i]+'">'+
       	                    		'			</div>'+
       	                    		'		</div>';
       	                    		$(".pull-list").append(str);
       	                    	}
       	                       getSlist();
       	   	  	        	},
       	   	  	        	error:function(data){
       	   	  	        		console.log(data)
       	   	  	        	}
       	   	  	        })
       	   	  	  }
       	   	    });
        }
       checkScroll();
	

	    $(window).resize(function() {
             checkScroll();
	   	})

	  })
      

		
	</script>
</body>
</html>

text.json
{
	"list":["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg"]
}

转载于:https://www.cnblogs.com/zhujiasheng/p/6132166.html

weixin_30384031

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫