早上好。我试图在从 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/