用jquery写的position瀑布流布局
2024-09-06 22:54:42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pin{
padding: 15px 0 0 15px;position: absolute;
}
.box{
padding: 10px;
border:1px solid #ccc;}
.box img{
width:100px;
height:auto;}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div id="main">
<div class="pin">
<div class="box">
<img src="img/1.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/44.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/44.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/44.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/44.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/44.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/nav60.png"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/mazha.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/nav60.png"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/22.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/33.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/nav60.png"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div>
<div>
<script>
window.onload=function(){
var screenWidth=$(window).width();
console.log("屏幕宽度："+screenWidth);
var cloumnNum= Math.floor(screenWidth/($('.pin').width())) ;
console.log(cloumnNum)
var cloumnHeight=[];
for(var i=0;i<cloumnNum;i++){
cloumnHeight.push(0)
}
console.log(cloumnHeight)
$("#main .pin").each(function(index){
var elementHeight=$(this).height();
var elementWidth=$(this).width();
console.log(index%(cloumnHeight.length))
$(this).css("left",(index%(cloumnHeight.length))*elementWidth).css("top",(cloumnHeight[index%(cloumnHeight.length)]))
cloumnHeight[index%(cloumnHeight.length)]+=elementHeight;
console.log(cloumnHeight)
})
}
</script>
</body>
</html>
最新文章
- IOS和Android图标尺寸
- QQ左侧滑动显示
- Centos7 搭建hadoop2.6 HA
- ubuntu1404_server搭建lamp
- java.net.SocketException四大异常解决方案【转】
- 001-python基础
- [React Testing] Setting up dependencies && Running tests
- Qt下HBoxLayout里的按钮有重叠
- idea调试SpringMvc, 出现：”通配符的匹配很全面, 但无法找到元素 'mvc:annotation-driven' 的声明“错误的解决方法
- boostrap---btn
- node调用phantomjs-node爬取复杂页面
- JMeter 压测基础（四）——Java工程测试
- GRU and LSTM
- 运用java反射机制获取实体方法报错，java.lang.NoSuchMethodException: int.<init>(java.lang.String)
- E. Superhero Battle Codeforces Round #547 (Div. 3) 思维题
- K - Transformation HDU - 4578 线段树经典题（好题）
- 第二篇-Django建立数据库各表之间的联系（中）
- undefined 和null的区别
- (后端)出现org.hibernate.NonUniqueResultException的原因即解决办法
- Jenkins与代码上线解决方案