以編程方式將圖像添加到div，並水平和垂直對齊

我有6個圖像，我想通過javascript或jquery以編程方式將這些圖像添加到div。有什麼辦法呢？就像我想讓每個對齊成爲2個圖像一樣。所以，如果有6張圖片，我需要3行，每行有2個法師。是否有可能通過js或jquery沒有CSS。以編程方式將圖像添加到div，並水平和垂直對齊

此外，我想添加一個雙擊處理程序添加到每個圖像。什麼是最好的辦法。

我循環直通各種圖像，如：

for(var i = 0; i < elements.length; ++i) { 
    if(elements[i].querySelector("img")) { 
     var path = elements[i].querySelector("img").src; 
     var newimage = document.createElement('img'); 
     newimage.setAttribute('src', path); 
     var div = document.getElementById("enclosingdiv"); 
     enclosingdiv.appendChild(newimage); 
    } 
}

來源

2016-11-20 Geek

來源爲這裏的圖像數據沒有提及。 *「是否有可能與CSS」*是的，這很容易研究佈局CSS。在這裏問問題之前，您需要做這樣的基礎研究 – charlietfl

圖像數據從服務器發出。我和我在一起。我的意思是有可能做到沒有CSS？ – Geek

沒有更多的技術和代碼的具體解釋，不會得到太多的幫助。強烈建議你花些時間閱讀[問] – charlietfl

你可以像這 -

 <div id="imagesDisplay"> 

     </div> 

     <script> 
     $(document).ready(function(){ 

      var elements = new Array("book2.jpg","book3.jpg","book4.jpg","book5.jpg"); 
      var noImages = 2; // 2 images per row 
      var imgCount = 0; // will keep count of images per row 
      var divHTML = ""; // will hold html tags to be dispalyed once the loop is complete i.e. all the images are added 
      for(var i = 0; i < elements.length; ++i) { 
       console.log(elements[i]); 

      if(imgCount ===0) { 
       divHTML += "<div class='row'>\n"; 
      } 
      divHTML += "<div class='col-md-6'><img src='images/"+elements[i]+"'></div>\n"; 
      imgCount++; 

      if(imgCount === noImages) { 
       imgCount = 0; 
       divHTML += "</div>\n"; 
      } 

     } 

     $("#imagesDisplay").html(divHTML); 
     }); 
     </script>

來源

2018-01-23 09:18:44

以編程方式將圖像添加到div，並水平和垂直對齊

回答

相關問題