Блог

Главная - Вопросы по программированию - как получить сетку разных размеров с помощью css и javascript

как получить сетку разных размеров с помощью css и javascript

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

У меня есть динамически создаваемая сетка с изображениями разных размеров, как мне получить галерею с плиткой

 <div class="container">
   <div class="block1">
      <img src="img1" />
   </div>
   <div class="block2">
      <img src="img1" />
   </div>
   <div class="block3">
      <img src="img1" />
   </div>
   <div class="block4">
      <img src="img1" />
   </div>
</div>

Я не хочу использовать сторонние библиотеки, любая помощь будет оценена..

Ответ №1:

Вы можете изменять размер своих изображений с помощью JavaScript. Например, этот код изменит размер каждого изображения на значение maximumHeight.

JSFiddle: http://jsfiddle.net/FU76g/

HTML:

 <div class="container" id="container">
   <div class="block1">
      <img src="http://placehold.it/350x150" />
   </div>
   <div class="block2">
      <img src="http://placehold.it/100x100" />
   </div>
   <div class="block3">
      <img src="http://placehold.it/250x200" />
   </div>
   <div class="block4">
      <img src="http://placehold.it/350x150" />
   </div>
</div>

JavaScript:

 var container_div = document.getElementById("container"); 
var array_img=container_div.getElementsByTagName("img");

var maxHeight=0;

for(var index = 0; index < array_img.length; index  ){
    if (array_img[index].clientHeight > maxHeight){
        maxHeight = array_img[index].clientHeight;
    }
}

alert("will do");
for(index = 0; index < array_img.length; index  ){
    array_img[index].height = maxHeight;
}
alert("done");

Комментарии:

1. Большое спасибо, Николас, это было то, что я искал, есть ли какой-нибудь способ, которым мы могли бы использовать style display:inline-block , чтобы он заполнял пробел

2. Добавьте это правило CSS: .container div{display:inline-block;}

Метки: