<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流效果--规则的(局部刷新)</title>
<style type="text/css">
/* 公用样式 */
body {
padding: 0;
margin: 0;
}
img {
border: none;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #999;
}
#title {
width: 600px;
margin: 20px auto;
text-align: center;
}
/* wrap */
#wrap {
width: auto;
height: auto;
margin: 0 auto;
position: relative;
}
#wrap .box {
width: 280px;
height: auto;
padding: 10px;
border: none;
float: left;
}
#wrap .box .info {
width: 280px;
height: 310px;
border-radius: 8px;
box-shadow: 0 0 11px #666;
background: #fff;
}
#wrap .box .info .pic {
width: 260px;
height: 260px;
margin: 0 auto;
padding-top: 10px;
}
#wrap .box .info .pic img {
width: 260px;
border-radius: 3px;
}
#wrap .box .info .title {
width: 260px;
height: 40px;
margin: 0 auto;
line-height: 40px;
text-align: center;
color: #666;
font-size: 18px;
font-weight: bold;
overflow: hidden;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<section id="title">
<h2>js瀑布流效果特效代码</h2>
</section>
<div id="wrap">
<div class="box">
<div class="info">
<div class="pic"><img src="images/1.jpg"></div>
<div class="title"><a href="www.baidu" target="_blank"> 瀑布流效果</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/2.jpg"></div>
<div class="title">瀑布流效果</div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/3.jpg"></div>
<div class="title">瀑布流效果</div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/4.jpg"></div>
<div class="title">瀑布流效果</div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/5.jpg"></div>
<div class="title">瀑布流效果</div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/6.jpg"></div>
<div class="title">瀑布流效果</div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/7.jpg"></div>
<div class="title">瀑布流效果</div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/4.jpg"></div>
<div class="title">瀑布流效果</div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/5.jpg"></div>
<div class="title">瀑布流效果</div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/6.jpg"></div>
<div class="title">瀑布流效果</div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/7.jpg"></div>
<div class="title">瀑布流效果</div>
</div>
</div>
</div>
</body>
</html>
<script>
var wrap=$('#wrap');
var boxs=$('.box');
var boxW=boxs.eq(0).outerWidth();
var colsNum=Math.floor(document.documentElement.clientWidth/boxW);
wrap.width(boxW*colsNum);
$(window).scroll(function () {
var flag=false;
var win=$(window).height()+$(window).scrollTop();
var lastBox=$('.box').last().outerHeight()+$('.box').last().offset().top;
if (win>lastBox-1){
flag = true;
$.ajax({
url:'6.json',
type:'get',
dataType:'json',
success:function (data) {
for(i in data){
var newHtml=$('<div class="box">\n' +
' <div class="info">\n' +
' <div class="pic"><img src="images/'+data[i].src+'"></div>\n' +
' <div class="title">'+data[i].title+'</div>\n' +
' </div>\n' +
' </div>')
wrap.append(newHtml);
}
}
})
}
})
</script>
瀑布效果
最新推荐文章于 2023-07-21 01:40:19 发布