:write: макет автоматической подгонки с помощью css flex
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin: 0px;
}
.block_info {
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row;
align-content: flex-start ;
display:-webkit-flex;
-webkit-flex-wrap: wrap-reverse;
-webkit-flex-direction: row;
-webkit-align-content: flex-start ;
margin: 0;
background: #EEEEEE;
margin-top: -151px;
}
.block_info img {
display: inline-flex;
height: 150px;
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
width: auto;
max-width: 400px;
border: transparent 1px solid;
border-radius: 2px;
}
.block_info img:nth-last-child(-n+5) {
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
} </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var s = $(".block_info"),
b = $('.foto');
function more() {
$.each(Array(Math.round(Math.random() * 50 + 11)), function(indx, element) {
$('<img/>', {
'src': 'http://tympanus.net/Development/AutomaticImageMontage/images/' + (Math.round(Math.random() * 50 + 1)) + '.jpg'
}).prependTo(s)
});
}
b.click(more);
more()
});
</script>
</head>
<body>
<div class="block_info"></div>
<input name="" type="button" value="more" class="foto">
</body>
</html>
|