5
У меня здесь неприятность. Мне нужна гибкая сетка изображений, которую мы можем увеличить на каждом изображении, а все остальные изображения должны автоматически переключаться на пустые пространства.Отзывчивая сетка с увеличением по объектам
Я пришел к которым решение работает частично:
$(document).ready(function() {
$("#wrapper div").click(function() {
if ($(this).siblings().hasClass('expanded')) {
$(this).siblings().removeClass('expanded');
}
$(this).addClass('expanded');
});
});.wrapper {
width:100%;
margin:0 auto;
}
.wrapper div {
width:31%;
margin:1%;
float:left;
-webkit-transition: width 1s;
transition: width 1s;
}
.expanded {
width:64% !important;
}
img {
width:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="wrapper" id="wrapper">
<div>
<img src="http://i.imgur.com/m9kLJMi.jpg">
</div>
<div>
<img src="http://i.imgur.com/1fR1mQQ.jpg">
</div>
<div>
<img src="http://i.imgur.com/CFf5bbM.jpg">
</div>
<div>
<img src="http://i.imgur.com/3U2gd7I.jpg">
</div>
<div>
<img src="http://i.imgur.com/N4pFnCE.jpg">
</div>
<div>
<img src="http://i.imgur.com/q81AaCs.jpg">
</div>
<div>
<img src="http://i.imgur.com/wjjhTtW.jpg">
</div>
<div>
<img src="http://i.imgur.com/9fifhrM.jpg">
</div>
<div>
<img src="http://i.imgur.com/gz5Qdv6.jpg">
</div>
</div>Но некоторые элементы разорвать сетку, только 1, 4 и 7 работать должным образом. JSFiddle example
Я пришел к другому решению, которое является gridly plugin. Но я не могу сделать это отзывчивым.
Есть ли у кого есть ключ, за которым я могу следовать.
Благодаря
следующий за этим, потому что мне любопытно. Я предполагаю, что это связано с вашей процентной шириной на обертке и divs –
Я надеюсь, что это нечто простое, как ширина. – MasterD
@MasterD, хотя у меня нет ответа для вас, я могу сказать, что это не так просто, как ширина. Проблема, с которой вы сталкиваетесь, заключается в том, как разметка HTML естественно хочет перетекать. Решение _may_ должно соответствовать строкам [Масонство] (http://masonry.desandro.com/). В принципе, вам нужно будет JavaScript, чтобы элементы могли переливаться в пустые пространства, оставленные при нажатии на любое поле, кроме 1, 4 и 7. – hungerstar