2017-02-28 13 views
0

ギャラリーを作成するhtmlタグで作成したいのですが、7つの画像があり、この画像が1つ表示されるようにしたいと思います。javascriptを使ってhtml DOMでギャラリーを作成する

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); 

答えて

0

あなたのコードはこのように見えます。

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; 
 
}

0

まず最初に、のdocument.writeを避けます。これを実行するはるかに信頼性の高い方法があります。第二に、do/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>

関連する問題