자바 스크립트로 html DOM으로 갤러리 만들기

Question

갤러리를 만들 html 태그를 만들고 싶습니다. 이미지가 7 개 있고이 이미지가 한 번 표시됩니다.이 코드는 3 행 7 이미지를 출력해야합니다.

var img=["sea.jpg","monkey.jpg","birtday.jpg","picture.jpg","nintendo.png","square.png","chrome.png"]; 


function gallery(galleryWidth,columnCount,gutter,divCount){ 
    var n=0; 
    document.write('<div class="gallery"style="width:'+galleryWidth+'px">');  

      while(n<img.length%columnCount){ 
      document.write('<div class="row">'); 
      for(i=0;i<img.length;i++){ 
       document.write('<div class="galItem"style="width:'+(galleryWidth/columnCount-2*gutter)+'px;margin:'+gutter+'px"> <img src="img/'+img[i]+'"/></div>'); 
      img.shift(); 
     } 

      document.write('</div>'); 
      document.write('<div class="clear"></div>'); 

      n++; 
    } 

    document.write("</div>"); 

    } 

gallery(240,3,5,7); 

Answer 1

코드가 이렇게 보입니다.

var img = ["sea.jpg", "monkey.jpg", "birtday.jpg", "picture.jpg", "nintendo.png", "square.png", "chrome.png"]; 
 
    
 
    
 
     function gallery(galleryWidth, columnCount, gutter) { 
 
      document.write('<div class="gallery" style="width:' + galleryWidth + 'px">'); 
 
    
 
      for (var j = 0; j < img.length; j++) { 
 
       var startNewLine = j && !(j % columnCount); 
 
       if (startNewLine) { 
 
        document.write('<div class="row">'); 
 
       } 
 
    
 
       document.write('<div class="galItem" style="width:' + (galleryWidth/columnCount - 2 * gutter) + 'px;margin:' + gutter + 'px"> <img alt="' + img[j] + '"/></div>'); 
 
       if (startNewLine) { 
 
        document.write('</div>'); 
 
        document.write('<div class="clear"></div>'); 
 
       } 
 
      } 
 
    
 
      document.write("</div>"); 
 
     } 
 
     gallery(240, 3, 5, 7);

.row { 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
.clear { 
 
    height: 0; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: 100%; 
 
    min-height:30px; 
 
} 
 

 
.galItem { 
 
    float: left; 
 
}

Answer 2

우선, document.write를 피하십시오. 이 작업을 수행하는 훨씬 더 신뢰할 수있는 방법이 있습니다. 둘째,/while과 for 루프가 복잡하게 얽힌 것처럼 보입니다. 이것은 당신이하려는 일일 것입니다.

var img = ["sea.jpg", 
 
    "monkey.jpg", 
 
    "birtday.jpg", 
 
    "picture.jpg", 
 
    "nintendo.png", 
 
    "square.png", 
 
    "chrome.png" 
 
    ]; 
 

 

 
    function gallery(galleryWidth, columnCount, gutter, divCount) { 
 
    this.width = galleryWidth; 
 
    this.cols = columnCount; 
 
    this.gutter = gutter; 
 
    this.divs = divCount; 
 
    var myRow, myDiv, myImg, myClearDiv; 
 
    var n = 0; 
 
    var myGallery = document.createElement('div'); 
 

 
    myGallery.classList.add('gallery'); 
 
    myGallery.style.width = this.width + "px"; 
 

 
    myRow = document.createElement('div'); 
 
    myRow.classList.add('row'); 
 

 
    for (i = 0; i < img.length; i++) { 
 
     if (n >= this.cols) { 
 
     myGallery.appendChild(myRow); 
 
     myClearDiv = document.createElement("div"); 
 
     myClearDiv.classList.add("clear"); 
 
     myGallery.appendChild(myClearDiv); 
 

 

 
     myRow = document.createElement('div'); 
 
     myRow.classList.add('row'); 
 
     n = 0; 
 
     } 
 
     myDiv = document.createElement('div'); 
 
     myDiv.classList.add('galItem'); 
 
     myDiv.style.width = this.width/this.cols - 2 * this.gutter + 'px'; 
 
     myDiv.style.margin = this.gutter + 'px'; 
 

 
     // Create the image element, and append it... 
 
     myImg = document.createElement('img'); 
 
     myImg.src = '"img/' + img[i] + '"'; 
 
     myDiv.appendChild(myImg); 
 

 
     // then, append the div to the row. 
 
     myRow.appendChild(myDiv); 
 

 
     n++; 
 
    } 
 

 
    myGallery.appendChild(myRow); 
 
    myClearDiv = document.createElement("div"); 
 
    myClearDiv.classList.add("clear"); 
 
    myGallery.appendChild(myClearDiv); 
 

 

 
    myRow = document.createElement('div'); 
 
    myRow.classList.add('row'); 
 

 
    var container = document.getElementById("container"); 
 
    container.appendChild(myGallery); 
 
    } 
 

 
    gallery(600, 3, 5, 4);

.galItem { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline; 
 
    border: 1px dotted blue; 
 
}

<div id="container"> 
 

 
</div>