JavaScript: Перемещение <div> элемент справа после двух элементов в столбце</div>

Вопрос:

Я не знаю, как это объяснить словами, поэтому я сделаю на фотографии:

explaination Итак, в основном я хочу, чтобы код записывал тег div справа после двух элементов в тех же столбцах. Стрелки покажут узор предметов.

Вот мой код:

<script>
imgs = ["/images/toilet.jpg", "/images/kitchen.jpg"];
for (var i=0,l=imgs.length; i<l; i++)
{
document.write("<div class='item'><img class='imgitem' src='" + imgs[i] + "'></div>");
}
</script>

Лучший ответ:

Хммм… спустив ваш текущий курс действий (используя JavaScript) для достижения такого поведения, вы можете использовать что-то вроде этого (измененный document.write для внутреннего подходаHTML, надеюсь, вы не против):

imgs = ["/images/toilet.jpg", "/images/kitchen.jpg"];
var imgHtml = "";
for (var i=0; i<imgs.length; i++)
{
    if (i % 2 == 0){
        imgHtml += "<div class='col-wrap'>";
    }
    imgHtml += "<div class='item'><img class='imgitem' src='" + imgs[i] + "'></div>";
    if (i % 2 != 0 || i == imgs.length - 1){
        imgHtml += "</div>";
    }
}
document.getElementById("wrapper").innerHTML = imgHtml;

И соответствующий CSS:

.col-wrap{
    display:inline-block;
    *display: inline;
    zoom: 1;
    vertical-align:top;
}

Обратите внимание, что вам нужно добавить в тело <div id="wrapper"></div> чтобы этот скрипт заменил innerHTML. Ключевым моментом здесь является добавление элемента .col-wrap вокруг каждых двух элементов .item, позволяющих разместить их в столбцах высотой 2.

(Edit) О, верно, вот пример на CodePen, если вы хотите знать, как это может выглядеть. (Это немного отличается с некоторым дополнительным стилем, поскольку у меня нет доступа к вашим изображениям, но идея сценария остается.)

Надеюсь, это было то поведение, которое вы искали! Если бы не было, не стесняйтесь говорить мне, и я буду рад помочь вам дальше. Удачи!

Ответ №1

Сделайте ваши объекты плавающими вправо, а затем после того, как будет написан 4-й элемент, добавьте div со style="clear:both" и напишите следующую строку.

Другой альтернативой является использование библиотеки, такой как кладка.

Ответ №2

Для этого вам не нужен JavaScript.

http://cssdeck.com/labs/pml2y1dl

.container {
-webkit-columns: 50px;
-moz-columns: 50px;
columns: 50px;
}

Свойство columns — это сокращение ширины столбца и столбца. Я предпочитаю использовать ширину столбца, поскольку он лучше работает с адаптивным дизайном, но вместо этого вы можете указать столбцы с точным числом (columns: 4).

http://caniuse.com/#feat=multicolumn

Ответ №3

Возможно, вы можете использовать только CSS:

.item {
display: inline-block;
*display: inline; /* IE7 Hack */
zoom: 1; /* FOR IE again... */
max-width: 25%;
}

И сделайте ваш контейнер шириной 4 изображений.

Оцените статью
TechArks.Ru
Добавить комментарий