木桶布局预览
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>木桶布局</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.img-preview{
width: 1000px;
margin: 0 auto;
}
.img-row {
margin-bottom: 8px;
}
.img-row:after {
content: "";
display: block;
clear: both;
}
.img-box {
float: left;
}
.img-line .img-box:first-child {
padding-left: 0;
}
</style>
</head>
<body>
<div class="img-preview">
</div>
<script>
// function Barrel($ct){
// this.$ct = $ct;
// this.rowList = [];
// this.loadImg();
// }
//
// Barrel.prototype = {
// loadImg: function(){
// var _this = this;
// var imgs = this.getImgUrls(10);
//
// for(var i=0; i<imgs.length; i++){
// var img = new Image();
// img.src = imgs[i];
// img.onload = function(){
// var imgInfo = {
// target : img,
// width: 200* (img.width/img.height),
// height: 200
// };
// _this.render(imgInfo);
// }
// }
// //
// },
//
// render: function(imgInfo){
// var clientWidth = this.$ct.width();
// var rowWidth = 0;
// var newRowHeight = 0;
// var lastImgInfo = imgInfo;
//
// this.rowList.push(imgInfo);
// for(var i=0; i< this.rowList.length; i++){
// rowWidth = rowWidth + this.rowList[i].width;
// }
// if(rowWidth > clientWidth){
// this.rowList.pop();
// newRowHeight = clientWidth*200/rowWidth;
// // rowWidth/200 == clientWidth/ X
//
// this.layout(newRowHeight);
// this.rowList = [];
// this.rowList.push(imgInfo);
// }
//
//
// },
//
// layout: function(newRowHeight){
// console.log('createRow');
// var $rowCt = $('<div class="img-row"></div>');
// $.each(this.rowList, function(idx, imgInfo){
// var $imgCt = $('<div class="img-box"></div>'),
// $img = $(imgInfo.target);
// $img.height(newRowHeight);
// $imgCt.append($img);
// $rowCt.append($imgCt);
// });
// console.log(this.$ct)
// this.$ct.append($rowCt);
// },
//
// getImgUrls: function(num) {
// var color, width, height, urls = [];
// for (var i = 0; i < num; i++) {
// color = Math.random().toString(16).substring(2, 8);
// width = Math.floor(Math.random() * 100 + 50);
// height = Math.floor(Math.random() * 30 + 50);
// urls.push("http://placehold.it/" + width + "x" + height + "/" + color + "/fff");
// }
// return urls;
// }
// }
//
//
//
//
// new Barrel($('.img-preview'));
function Barrels($ct) {
this.$ct = $ct;
this.imgNum = 40;
this.baseHeight = 100;
this.rowList = [];
this.loadImg();
}
Barrels.prototype = {
loadImg: function() {
var _this = this;
var imgUrls = this.getImgUrls(100);
$.each(imgUrls,function(idx, url){
console.log(url);
var img = new Image();
img.src = url;
img.onload = function(){
var originWidth = img.width,
originHeight = img.height,
ratio = originWidth/originHeight;
var imgInfo = {
target: $(img),
width: _this.baseHeight*ratio,
height: _this.baseHeight,
ratio: ratio
};
_this.render(imgInfo);
}
});
},
render: function(imgInfo){
var _this = this;
var rowList = this.rowList,
rowWidth = 0,
rowHeight = 0,
clientWidth = this.$ct.width(),
lastImgInfo = imgInfo;
this.rowList.push(imgInfo);
$.each(rowList,function(idx, imgInfo){
rowWidth += imgInfo.width;
if(rowWidth > clientWidth ){
rowList.pop();
rowWidth = rowWidth - lastImgInfo.width;
rowHeight = clientWidth * _this.baseHeight / rowWidth;
_this.createRow(rowHeight);
_this.rowList = [];
_this.rowList.push(lastImgInfo);
}
});
},
createRow: function(rowHeight){
console.log('createRow');
var $rowCt = $('<div class="img-row"></div>');
$.each(this.rowList, function(idx, imgInfo){
var $imgCt = $('<div class="img-box"></div>'),
$img = imgInfo.target;
$img.height(rowHeight);
$imgCt.append($img);
$rowCt.append($imgCt);
});
console.log(this.$ct)
this.$ct.append($rowCt);
},
getImgUrls: function(num) {
var color, width, height, urls = [];
for (var i = 0; i < num; i++) {
color = Math.random().toString(16).substring(2, 8);
width = Math.floor(Math.random() * 100 + 50);
height = Math.floor(Math.random() * 30 + 50);
urls.push("http://placehold.it/" + width + "x" + height + "/" + color + "/fff");
}
return urls;
}
}
var barrels = new Barrels($('.img-preview'));
</script>
</body>
</html>
瀑布流布局预览
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流布局复习</title>
<style media="screen">
div{
margin: 0;
padding: 0;
}
.content{
position: relative;
}
.box{
width:200px;
position: absolute;
margin-left: 10px;
margin-top: 10px;
transition: all 2s;
}
.h1{
background-color: green;
height: 300px;
}
.h2{
background-color: purple;
height: 250px;
}
.h3{
background-color: blue;
height: 200px;
}
.h4{
background-color: yellow;
height: 350px;
}
</style>
</head>
<body>
<div class="content">
<div class="h1 box">1</div>
<div class="h4 box">2</div>
<div class="h1 box">3</div>
<div class="h3 box">4</div>
<div class="h1 box">5</div>
<div class="h1 box">6</div>
<div class="h2 box">7</div>
<div class="h4 box">8</div>
<div class="h1 box">9</div>
<div class="h2 box">10</div>
<div class="h1 box">11</div>
<div class="h2 box">12</div>
<div class="h1 box">13</div>
<div class="h3 box">14</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
function render(){
var nodeWidth = $('.box').outerWidth(true),
boxNumber = parseInt($(window).width()/nodeWidth), //parseInt()是取整数的意思;
culSumHeight = [];
for(var i=0; i<boxNumber; i++){
culSumHeight.push(0);
}
$('.box').each(function(){
var $cur = $(this);
var idx = 0;
var minSumHeight = culSumHeight[0];
for(var i=0; i<culSumHeight.length; i++){
if(culSumHeight[i] < minSumHeight){
idx = i;
minSumHeight = culSumHeight[i];
}
}
$cur.css({
'left': nodeWidth*idx,
'top': minSumHeight
});
culSumHeight[idx] = culSumHeight[idx] + $cur.outerHeight(true);
})
}
render();
$(window).on('resize',function(){
render();
})
</script>
</body>
</html>
