跟随浏览器框架大小，主题内容居中
代码
<!DOCTYPE html>
<html>
<head>
<title>masonry瀑布流插件</title>
<meta charset="utf-8">
<script src="./jquery.min.js"></script>
<script src="./masonry.js"></script>
<style>
#masonry{margin: 0 auto;}
#masonry .box{width: 250px; padding: 0px; background: #f00; margin: 0 0 10px;}
#masonry .box img{width: 100%}
.text{text-align: center;padding: 20px; background: #eee; margin-bottom: 20px;}
</style>
</head>
<body>
<div class="text">浏览器不管怎么切换 Masonry内容都会居中</div>
<div class="content">
<div id="masonry">
<div class="box">111</div>
<div class="box"><img src="./images/a02.jpg"></div>
<div class="box"><img src="./images/a01.jpg"></div>
<div class="box"><img src="./images/a03.jpg"></div>
<div class="box">343</div>
<div class="box"><img src="./images/a02.jpg"></div>
<div class="box"><img src="./images/a01.jpg"></div>
<div class="box"><img src="./images/a03.jpg"></div>
<div class="box"><img src="./images/a01.jpg"></div>
<div class="box"><img src="./images/a03.jpg"></div>
<div class="box">343</div>
<div class="box"><img src="./images/a02.jpg"></div>
<div class="box"><img src="./images/a01.jpg"></div>
<div class="box">111</div>
<div class="box"><img src="./images/a02.jpg"></div>
<div class="box"><img src="./images/a01.jpg"></div>
<div class="box"><img src="./images/a03.jpg"></div>
<div class="box">343</div>
<div class="box"><img src="./images/a02.jpg"></div>
<div class="box"><img src="./images/a01.jpg"></div>
<div class="box"><img src="./images/a03.jpg"></div>
<div class="box"><img src="./images/a01.jpg"></div>
<div class="box"><img src="./images/a03.jpg"></div>
<div class="box">343</div>
<div class="box"><img src="./images/a02.jpg"></div>
<div class="box"><img src="./images/a01.jpg"></div>
</div>
</div>
<script type="text/javascript">
$(function() {
var $container = $(‘#masonry‘);
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: ‘.box‘,
gutter: 20, // 盒子间距
isAnimated: true,
});
});
masonryWidth();
});
// 设置masonry 宽度
function masonryWidth(){
$browser = document.body.clientWidth;
$boxWidth = 250; // 盒子宽度
$boxSpacing = 20; //盒子与盒子之间的间距
if($browser <=500 ){
$("#masonry").css(‘width‘,250);
}else{
$num = ($browser-$boxWidth) / ($boxWidth + $boxSpacing );
$n = parseInt($num);
$masonryWidth = $n * ($boxWidth + $boxSpacing) + $boxWidth;
$("#masonry").css(‘width‘,$masonryWidth);
}
// 浏览器窗口变动
window.onresize = masonryWidth;
}
</script>
</body>
</html>
时间： 2024-08-26 06:22:32