Question

大家好。请注意，我仍然是CSS的初学者;）

我正在制作一个可点击的网址缩略图预览我的博文（或者更确切地说 - ＆gt;带有描述在其下或其上的图像库，当点击时，将您带到帖子本身）

，并且想知道，关于不同图像的显示，而不仅仅是一个相同的图像，如下面的屏幕：

Gallery

我已经知道，我可能应该使用background-image：而不是HTML中的图像，但我无法弄清楚在使用许多图像时最好的做法是什么。

我应该为每个图像div创建一个类或一个id吗？或者可以通过一两个班来完成？
使用网址制作发布缩略图库时，您的最佳做法是什么？

以下是代码：

＆＃13;

 div.wrapper{
    width: ("275 + YOUR border-size" x 3)px;
     }
    div.image{
    background-image: url(..path to your img);
    float: left
    }

＆＃13;

<div class="wrapper">
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    ... add all your imgs here
    <div style="clear: both"></div> //need this one here to make the wrapper extend 
</div>

＆＃13;

所有帮助非常感谢：）

Answer 1

您可以单独为它们创建一个ID并分配它们，但作为开发人员，我们应该寻求消除重复。

使用CSS和HTML几乎不可能实现这一点。

所以我们需要Javascript的帮助。

标识符

我们需要一些可以使每一个都特别的东西，可以将它们分开，无论是ID还是类。

我即将编写的代码的语法看起来有点疯狂，但它有效。

的解决方案的

也使用jquery。

     $(document).ready(function(){
     //once the document/page has loaded run this code
         array = [filepath1,filepath2,filepath3];
         //hold all your file paths in an array
         for (i=0;i<array.length;i++){
          //here we loop through the array and enclose each file path with an image tag
            $('.wrapper').html('<img class="image" src="'+array[i]+'.jpg" /><br>');
         }
     });

HTML 的

您的HTML将如下所示

      <html lang="en">
           <head>
              <!--Include Javascript file you just made-->
              <script type="text/javascript" src="./file.js"></script>
              <!--Include jquery-->
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
           </head>

           <body>
                <div class="wrapper"></div>
          </body>
      </html>

多个网址缩略图galerry

1 个答案: