How could I insert a line break after each image that loads in from the Flickr API?
Question
Good Morning. I am attempting to insert a line break after each image that loads from the Flickr API. I am not quite sure how to manipulate the style of data that has not yet loaded into the browser.
I have tried to use the
tag within the "images" div in my HTML. I have also tried to manipulate the javascript when calling the Flickr API function.
<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>
The user clicks "GO!" and 25 pictures load into the "images" div. Each picture is on its own line. Currently, the 25 images load and stack horizontally before the page break
.
2 answers
solution1
2 ACCPTED 2019-07-19 15:11:22
I believe you just want your images to be displayed as a block ? <img> tag default display value is inline-block . You can just give them a class when appending.
$('#images').append('<img class="image" src="' + url + '"/>');
.image {
display: block;
}
Another way would be to add display: flex to your .images div.
.images {
display: flex;
flex-flow: column wrap;
}
solution2
0 2019-07-19 15:12:39
You'll want to use block level elements or style your img tags as block. The simplest solution is to wrap your img s:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.