gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 00:46:07 24 4
gpt4 key购买 nike

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

我曾尝试在我的 HTML 中的“图像”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>

用户点击“开始!”并将 25 张图片加载到“图像”div 中。每张图片都在它自己的行上。目前,这 25 张图片在分页符之前水平加载和堆叠

最佳答案

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

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


.image {
display: block;
}

另一种方法是添加 display: flex给你的.images分区


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

关于javascript - 如何在从 Flickr API 加载的每个图像后插入换行符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57115149/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com