以编程方式将图像添加到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，并水平和垂直对齐

回答

相关问题