<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Brick Wall</title>
<meta name="keywords" content="Brick Wall">
<meta name="description" content="Brick Wall">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<style>
body{
background: #666;
}
#demo{ 960px; margin: 0 auto;}
#demo .brick-item{
transition: transform .3s;
}
#demo .brick-item:hover{
transform: scale(1.1);
}
</style>
<h1>Brick Wall</h1>
<div class="brick-wall" id="demo">
<img class="brick-item" src="./img/5.jpg" />
<img class="brick-item" src="./img/6.jpg" />
<img class="brick-item" src="./img/7.jpg" />
<img class="brick-item" src="./img/8.jpg" />
<img class="brick-item" src="./img/9.jpg" />
<img class="brick-item" src="./img/10.jpg" />
<img class="brick-item" src="./img/11.jpg" />
<img class="brick-item" src="./img/12.jpg" />
<img class="brick-item" src="./img/13.jpg" />
<img class="brick-item" src="./img/14.jpg" />
<img class="brick-item" src="./img/15.jpg" />
<img class="brick-item" src="./img/16.jpg" />
<img class="brick-item" src="./img/17.jpg" />
<img class="brick-item" src="./img/18.jpg" />
<img class="brick-item" src="./img/19.jpg" />
<img class="brick-item" src="./img/20.jpg" />
<img class="brick-item" src="./img/1.jpg" />
<img class="brick-item" src="./img/2.jpg" />
<img class="brick-item" src="./img/3.jpg" />
<img class="brick-item" src="./img/4.jpg" />
</div>
</body>
</html>
<script>
function paperwall(json){
var Data={
obj:json.obj,
height:json.height||150,
margin:json.margin||0
}
var aImg=document.getElementsByTagName("img");
var nWidth=demo.offsetWidth;
var rowArr=[];
var rowWidth=0;
var temp=[];
//图片定高，浮动，添加外边距
for(var i = 0; i < aImg.length; i++) {
aImg[i].style.cssText="height:"+Data.height+"px;float:left;margin:"+Data.margin+"px;";
}
//分组
for(var i = 0; i < aImg.length; i++){
rowWidth+=aImg[i].offsetWidth+Data.margin*2;
if(rowWidth>nWidth){
rowArr.push(temp);
rowWidth=0;
temp=[];
rowWidth+=aImg[i].offsetWidth+Data.margin*2;
}
temp.push(i)
}
//计算每一组的高度
for(var i=0; i<rowArr.length; i++){
(function(index){
var tempArr=rowArr[index];
//去掉图片的外边距的宽度
var nWidths=nWidth-tempArr.length*Data.margin*2;
var tempWidth=0;
//求出每一行的图片总宽度
for (var z = tempArr[0]; z <= tempArr[tempArr.length-1]; z++) {
tempWidth+=aImg[z].offsetWidth;
}
//根据比例求出图片的高度，自由缩放，变成一整行。
for (var m = tempArr[0]; m <= tempArr[tempArr.length-1]; m++) {
aImg[m].style.width=Math.floor((nWidths/tempWidth)*aImg[m].offsetWidth)+"px";
aImg[m].style.height=Math.floor((nWidths/tempWidth)*Data.height)+"px";
};
})(i)
}
}
window.onresize=window.onload=function(){
var demo=document.getElementById("demo");
paperwall({
obj:demo,
height:180,
margin:1
});
}
</script>
效果图如下，图片请自理：
效果是在网上找到的，不过他是用的jq写的（估计原作者一看图片就知道了），
/**
*
* @authors myqianlan (linquantan@gmail.com)
* @date 2015年2月5日16:02:10
* @version $Id$
*/
这个人提供的下载地址好像是在git上面，具体的地址忘记了，这个可别说版权什么的啊，我已经很明确的说了是抄袭了。
他是这样写的声明，具体是谁反正我是没有理一下，上面是废话，下面的是正题。
我就用js重新了一下，主要是我觉得我公司的产品已经加载了太多了jq，跑起来很费力气了，所以我决定以后不再公司的产品里面加一句jq了，我公司的产品在火狐下面跑半个小时候肯定崩掉的，唉，都是插件惹的祸，没有了jq就活不下去了，