Форум

awoll_n · #1 (**permalink**) 03.02.2021, 02:47

Ребята подскажите как сделать из это:

<div class="images">
              <img class="p--img" src="images/p01.jpg" alt="">
              <img class="p--img" src="images/p02.jpg" alt="">
              <img class="p--img" src="images/p03.jpg" alt="">
              <img class="p--img" src="images/p04.jpg" alt="">
              <img class="p--img" src="images/p05.jpg" alt="">
              <img class="p--img" src="images/p06.jpg" alt="">   
              <img class="p--img" src="images/p07.jpg" alt="">
              <img class="p--img" src="images/p08.jpg" alt="">       
            </div>

Вот это:

<div class="images">
              <div class="group">
                <img class="p--img" src="images/p01.jpg" alt="">
                <img class="p--img" src="images/p02.jpg" alt="">
                <img class="p--img" src="images/p03.jpg" alt="">
                <img class="p--img" src="images/p04.jpg" alt="">   
              </div>   
              <div class="group">
                <img class="p--img" src="images/p05.jpg" alt="">
                <img class="p--img" src="images/p06.jpg" alt="">
                <img class="p--img" src="images/p07.jpg" alt="">
                <img class="p--img" src="images/p05.jpg" alt="">   
              </div>   
            </div>

То есть добавить в группы и иметь возможность указывать сколько картинок должны быть в группах! Спасибо

voraa · #2 (**permalink**) 03.02.2021, 07:46

<style>
.images {
	border: 1px blue solid;
	padding: 10px;
}
.group {
	border: 1px red solid;
	padding: 10px;
	margin: 5px 0;
}
img {
	width: 20px;
	height: 20px;
	margin: 5px;
}
</style>
<body>
<div class="images">
              <img class="p--img" src="images/p01.jpg" alt="">
              <img class="p--img" src="images/p02.jpg" alt="">
              <img class="p--img" src="images/p03.jpg" alt="">
              <img class="p--img" src="images/p04.jpg" alt="">
              <img class="p--img" src="images/p05.jpg" alt="">
              <img class="p--img" src="images/p06.jpg" alt="">  
              <img class="p--img" src="images/p07.jpg" alt="">
              <img class="p--img" src="images/p08.jpg" alt="">      
              <img class="p--img" src="images/p01.jpg" alt="">
              <img class="p--img" src="images/p02.jpg" alt="">
              <img class="p--img" src="images/p03.jpg" alt="">
              <img class="p--img" src="images/p04.jpg" alt="">
              <img class="p--img" src="images/p05.jpg" alt="">
              <img class="p--img" src="images/p05.jpg" alt="">
            </div>
<script>
const group = (dv, n) => {
	let chim;
	while ((chim = dv.querySelectorAll(':scope>.p--img')) && chim.length) {
		const ng = Math.min(chim.length, n);
		const dg = document.createElement('div');
		dg.setAttribute('class', 'group');
		dv.insertBefore(dg, chim[0]);
		for (let i=0; i< ng; i++) dg.append(chim[i])
	}
}

group (document.querySelector('.images'), 3)
</script>
</body>

рони · #3 (**permalink**) 03.02.2021, 08:00

awoll_n,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
.group{
    border: 1px solid #0000CD;
    display: flex;
    justify-content: space-around;
}
.p--img{
    height: 100px;
    width: 100px;
    background-color: #FFFF00;
}
    </style>
    <script>
document.addEventListener("DOMContentLoaded", function() {
    const wrapEach = (selector, wrapper, countToWrap, cls) => {
        let container = document.createElement(wrapper);
        container.classList.add(cls);
        document.querySelectorAll(selector).forEach((el, i) => {
            i % countToWrap || (container = container.cloneNode(),
                el.replaceWith(container));
            container.append(el);
        })
    }
    wrapEach('.p--img', 'div', 4, 'group');
});
    </script>
</head>
<body>
<div class="images">
        <img class="p--img" src="images/p01.jpg" alt="">
        <img class="p--img" src="images/p02.jpg" alt="">
        <img class="p--img" src="images/p03.jpg" alt="">
        <img class="p--img" src="images/p04.jpg" alt="">
        <img class="p--img" src="images/p05.jpg" alt="">
        <img class="p--img" src="images/p06.jpg" alt="">
        <img class="p--img" src="images/p07.jpg" alt="">
        <img class="p--img" src="images/p08.jpg" alt="">
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript