вопрос
Как сделать так чтобы новости отображались таким образом?
Выбор шаблона новости, например BIG или SMALL, и чтобы новости чередовали, после BIG стояли 4 SMALL, а ниже наоборот.
Выбор шаблона новости, например BIG или SMALL, и чтобы новости чередовали, после BIG стояли 4 SMALL, а ниже наоборот.
На самом деле всё довольно просто, главное правильно подобрать размеры в css (я подбирал методом тыка, чтобы в 800px умещалось.
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>Динамическое изменение шаблона новости</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
jQuery(function($) {
$('.news:nth-child(5n+1)').addClass('big').before('<div class="clr"></div>');
$('.news.big:odd').addClass('fright');
});
</script>
<style>
body {
width: 800px;
margin: 50px auto;
}
.news {
width: 188px;
height: 188px;
margin: 5px;
border: solid 1px #ccc;
float: left;
position: relative;
}
.news img {
max-width: 188px;
max-height: 188px;
}
.news.big img {
max-width: 388px;
max-height: 388px;
}
.news.big {
width: 388px;
height: 388px;
}
.news h2 {
margin: 0;
padding: 10px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
font: normal 14px/18px Arial, Helvetica, sans-serif;
color: #323232;
background: rgba(0,0,0, 0.5)
}
.clr {clear: both; height: 0; overflow: hidden;}
.fright {float: right;}
</style>
</head>
<body>
<div class="news">
<h2>Заголовок новости</h2>
<img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
</div>
<div class="news">
<h2>Заголовок новости</h2>
<img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
</div>
<div class="news">
<h2>Заголовок новости</h2>
<img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
</div>
<div class="news">
<h2>Заголовок новости</h2>
<img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
</div>
<div class="news">
<h2>Заголовок новости</h2>
<img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
</div>
<div class="news">
<h2>Заголовок новости</h2>
<img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
</div>
<div class="news">
<h2>Заголовок новости</h2>
<img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
</div>
<div class="news">
<h2>Заголовок новости</h2>
<img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
</div>
<div class="news">
<h2>Заголовок новости</h2>
<img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
</div>
<div class="news">
<h2>Заголовок новости</h2>
<img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
</div>
<div class="news">
<h2>Заголовок новости</h2>
<img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
</div>
<div class="news">
<h2>Заголовок новости</h2>
<img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
</div>
<div class="news">
<h2>Заголовок новости</h2>
<img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
</div>
<div class="news">
<h2>Заголовок новости</h2>
<img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
</div>
<div class="news">
<h2>Заголовок новости</h2>
<img src="http://hostingkartinok.com/uploads/images/2011/10/664a41ac520e125a53f750164d643203.jpeg" alt="Картинки">
</div>
<div class="clr"></div>
</body>
</html>
