瀑布流图片墙,原位置点击放大

由 夕空 撰写于  2020年6月15日


<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流图片墙</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/gsap.min.js"></script>
<style>
*{box-sizing: border-box;}
.grid li{padding: 5px;list-style: none;}
.grid img{max-width: 90px;}
.w1{width: 60px;}
.w2{width: 120px;}
[class*=w] img{max-width: 100%;}
</style>
</head>

<body>
<ul class="grid">
</ul>
<!-- 图片加载侦听-->
<script src="js/imagesloaded.pkgd.min.js"></script>
<!-- 瀑布流布局-->
<script src="js/masonry.pkgd.min.js"></script>
<script>
//获得物体中心和鼠标坐标连线,与y轴正半轴之间的夹角
function getAngle(target1, target2) {
var x = Math.abs(target1.x - target2.x);
var y = Math.abs(target1.y - target2.y);
var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
var cos = y / z;
var radina = Math.acos(cos);//用反三角函数求弧度
var angle = Math.floor(180 / (Math.PI / radina));//将弧度转换成角度

if (target2.x > target1.x && target2.y > target1.y) {//鼠标在第四象限
angle = 180 - angle;
}
if (target2.x == target1.x && target2.y > target1.y) {//鼠标在y轴负方向上
angle = 180;
}
if (target2.x > target1.x && target2.y == target1.y) {//鼠标在x轴正方向上
angle = 90;
}
if (target2.x < target1.x && target2.y > target1.y) {//鼠标在第三象限
angle = 180 + angle;
}
if (target2.x < target1.x && target2.y == target1.y) {//鼠标在x轴负方向
angle = 270;
}
if (target2.x < target1.x && target2.y < target1.y) {//鼠标在第二象限
angle = 360 - angle;
}

return angle;
}
// 两点间距离
function getDistance(target1, target2) {
var xdiff = Math.abs(target2.x - target1.x);
var ydiff = Math.abs(target2.y - target1.y);
return Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
}
</script>

<script>

var str="";
for(var i=0;i<150;i++){
str+=`<li><img src="images/${Math.floor(Math.random()*5+1)}.jpg"/></li>`
}
$('.grid').append(str)


var $grid = $('.grid').masonry();
$grid.imagesLoaded().progress(function () {
$grid.masonry('layout');
}).always( function( instance ) {
$('.grid li').each(function(){
$(this).attr('w',$(this).width());
$(this).attr('h',$(this).height());
})
})

var spacing=400;
function juli(onli){
//onli[0].getBoundingClientRect().x
var x=onli[0].offsetLeft+onli.attr('w')*.5;
var y=onli[0].offsetTop+onli.attr('h')*.5;
var target1={x:x,y:y}
for(var i=0;i<$('.grid li').length;i++){
var $target=$('.grid li').eq(i);
var _w=$target.attr('w');
var _h=$target.attr('h');
var target2={x:$target[0].offsetLeft+_w*.5,y:$target[0].offsetTop+_h*.5}
var dis = getDistance(target1,target2)
if(dis<spacing){
var s = dis / spacing * 1;
s<0.4&&(s=0.5);

var angle = -getAngle(target1, target2) + 180;//角度
var radian = (2 * Math.PI / 360) * angle;
var radius = (spacing - (dis / spacing) * spacing) * .3;//半径
TweenMax.to($target, .7, { scale: s, x: Math.sin(radian) * radius, y: Math.cos(radian) * radius, ease: Power2.easeInOut });
}else{
TweenMax.to($target, .7, { scale: 1, x: 0, y: 0, ease: Power2.easeInOut });
}
}
TweenMax.to(onli, .7, { scale: 3, ease: Power2.easeInOut });

}

$('.grid li').click(function(ev){
juli($(ev.currentTarget))
})

</script>
</body>

</html>



声明:星耀夕空|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 瀑布流图片墙,原位置点击放大


欢迎光顾我的小站!