我有一个页面，它根据用户输入的内容从 Flickr API 中提取图像。就目前而言，图像被检索并显示在每个 4 个的内联 block 列表中。但是，如果一个图像比其他图像更宽或更窄，它将与其他图像的宽度发生冲突，并且要么结束在它自己的行上，要么将它推到它自己的行上。
我如何确保始终连续显示四张图片，并且任何新行也有四张图片。另外，列表项上的边框到底是我遗漏了什么。我给 li 标签和 img 标签添加了边框样式但没有显示？
感谢您的任何见解。
$(document).ready(function(){
$('form').submit(function(evt){
evt.preventDefault();
//AJAX
var url = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var searchTerm =$('#search').val();
var userQuery =
{
tags:searchTerm,
format:"json"
}; //The data that is actually sent back to Flickr when a request is made for photos
function flickerData (data){
var photoHTML = '<ul>';
$.each(data.items, function(i,photo) {
photoHTML+='<div class="containment"><li class="col-md-3">';
photoHTML += '<a href="'+photo.link+'">';
photoHTML += '<img src="'+photo.media.m+'"> </a> </li> </div>';
});
photoHTML += "</ul>";
$('#photos').html(photoHTML);
}
$.getJSON(url, userQuery, flickerData);
});//end eventsubmit
});}
form{
margin-top: 5%
}
ul{
display: block;
list-style-type: none;
}
li {
margin: 30px 0px;
width: 25%;
float: left;
padding: 3%;
display: inline-block
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="flicker.css">
<title>Testing Access to Flicker API</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="flicker.js"></script>
</head>
<body>
<div class="container">
<h1 class="text-center">Welcome to the Flicker API search test.</h1>
<h4 class="text-center">Use the form below to search the open Flicker API based on tag.</h4>
<form>
<div class="col-sm-4 form-group">
<label for="search">What kind of photos are you looking for?</label>
<input name="search" id="search" class="form-control" type="search" />
<input type="submit" class='button'/>
</div>
</form>
</div>
<div class="container">
<ul id="photos"></ul>
</div>
</body></html>最佳答案
调整你的代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<title>Accessing Flickr API</title>
<style>
.row {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="text-center">Welcome to the Flicker API search test.</h1>
<h4 class="text-center">Use the form below to search the open Flicker API based on tag.</h4>
<form class="form-inline">
<div class="form-group">
<label for="search">What kind of photos are you looking for?</label>
<input type="text" class="form-control" id="search" placeholder="Search Flicr Photo">
</div>
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
<div class="container" id="photos">
</div>
<script>
$(document).ready(function () {
$('form').submit(function (evt) {
evt.preventDefault();
//AJAX
var url = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var searchTerm = $('#search').val();
var userQuery = {
tags: searchTerm,
format: "json"
}; //The data that is actually sent back to Flickr when a request is made for photos
function flickerData(data) {
var rowStart = '<div class="row">';
var rowEnd = '</div>';
var cnt = 0;
var photoHTML = '';
var dataLength = data.items.length;
$.each(data.items, function (i, photo) {
if (cnt % 4 == 0) {
photoHTML += rowStart;
}
photoHTML += '<div class="col-md-3">';
photoHTML += '<a class="btn btn-primary" href="' + photo.link + '">';
photoHTML += '<img class="img-responsive center-block img-rounded img-thumbnail" src="' + photo.media.m + '"> </a> </div>';
if ((cnt + 1) % 4 == 0 || (cnt - 1) == dataLength) {
photoHTML += rowEnd;
}
cnt++;
});
$('#photos').html(photoHTML);
}
$.getJSON(url, userQuery, flickerData);
}); //end eventsubmit
});
</script>
</body>
</html>
您也可以在 codepen 中查看它 http://codepen.io/arsho/full/NAabPL/
关于jquery - 如何设置每行 4 个图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38277614/