如何在从 Flickr API 加载的每个图像后插入换行符？

Question

早上好。我试图在从 Flickr API 加载的每个图像后插入一个换行符。我不太确定如何操作尚未加载到浏览器中的数据样式。

我尝试在 HTML 的 "images" div 中使用
标签。我也曾尝试在调用 Flickr API 函数时操纵 javascript。

<body>
  <div class="navbar">
     <input type="text" id="content">
     <button id="submit", type="submit" class="button">GO!</button>
  </div>
  <div class="container">


 <div id="images">

      <p>This is where the 25 pictures are loaded. 
      They load horizontally and move to the next 
      line when there is not enough room.
      I would like a line break <br> after each image.</p>

      </div>
  </div>
  <!--script-->
  <script>
     $(document).ready(function () {

       $("#submit").click(function (event) {

         var searchVal = $("#content").val();
         var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=//KEY_GOES_HERE&nojsoncallback=1";
           $.getJSON( flickrAPI, {
           tags: searchVal,
           per_page: 25,
            //safeSearch
           safe_search: 1,
           format: "json"
         },  
           function( data ) {
               $('#images').empty();
           $.each( data.photos.photo, function( i, item ) {
             var url = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg';

            $('#images').append('<img src="' + url + '"/>');
          });

        });
     });    
     });
  </script>
 </body>
</html>

用户点击"GO!"，25张图片加载到"images"div。每张图片都在它自己的行上。目前，25 张图片在分页前水平加载和堆叠
。

Answer 1

我相信你只是想让你的图像显示为一个块？ <img>标签默认显示值为inline-block。您可以在附加时给他们一个 class。

$('#images').append('<img class="image" src="' + url + '"/>');


.image {
  display: block;
}

另一种方法是将 display: flex 添加到您的 .images div.


.images {
  display: flex;
  flex-flow: column wrap;
}

Answer 2

您需要使用块级元素或将 img 标签设置为块。最简单的解决方案是包装您的 imgs：

<div class="images">
  <img src="https://cataas.com/cat?width=100" alt="">
  <img src="https://cataas.com/cat?width=100" alt="">
  <img src="https://cataas.com/cat?width=100" alt="">
  <img src="https://cataas.com/cat?width=100" alt="">
  <img src="https://cataas.com/cat?width=100" alt="">
</div>

below is wrapped
<div class="images">
  <div><img src="https://cataas.com/cat?width=100" alt=""></div>
  <div><img src="https://cataas.com/cat?width=100" alt=""></div>
  <div><img src="https://cataas.com/cat?width=100" alt=""></div>
  <div><img src="https://cataas.com/cat?width=100" alt=""></div>
  <div><img src="https://cataas.com/cat?width=100" alt=""></div>
</div>

如何在从 Flickr API 加载的每个图像后插入换行符？

How could I insert a line break after each image that loads in from the Flickr API?

html

javascript

css

json

flickr