jQuery - 使用 <ul><li></li></ul> 标签在一栏中列出 Flickr 照片
jQuery - List Flickr photos in one column using <ul><li></li></ul> tags
我有以下代码...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flickr</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#photoform').submit(function () {
var keyword = $('#keyword').val();
$('#photolist').html('Please wait...');
$.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?tags=' + keyword + '&format=json&jsoncallback=?',
function (data) {
$('#photolist').empty();
$.each(data.items, function (index, item) {
$('#photolist').append('<li><img src="' + item.media.m + '" align="left"/></li><br />');
});
}
);
return false;
});
});
</script>
<style type="text/css">
#photos {
margin-top: 20px;
}
#photos img {
height: 200px;
width: 250px;
margin-right: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div data-role="page" id="photos">
<form method="get" name="photoform" id="photoform">
Keyword: <input type="text" name="keyword" id="keyword" value="" /><input type="submit" name="findphoto" id="findphoto" value="Find" />
<ul data-role="listview" data-filter="false" id="photolist"></ul>
</form>
</div>
</body>
</html>
我想使用
将 Flickr API 照片显示为一栏
<ul><li></li></ul>
标签。示例参考代码中的$.getJSON。但是当我 运行 它时,它不会吐出一栏中的照片。它将它们吐出 5 列。有什么建议吗?
我正在查看您的部分代码:
$('#photolist').append('<li><img src="' + item.media.m + '" align="left"/></li><br />');
这表明图片将一张叠加显示。如果是这种情况并且您对此不满意,它应该建议您希望图像彼此相邻排成一行。
如果是这样,您应该将上面的行更改为下面的行:
$('#photolist').append('<li><img src="' + item.media.m + '" align="left"/></li>');
还在样式表声明中添加以下内容:
ul#photolist li{
width: 20%;
display: inline-block;
}
我有以下代码...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flickr</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#photoform').submit(function () {
var keyword = $('#keyword').val();
$('#photolist').html('Please wait...');
$.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?tags=' + keyword + '&format=json&jsoncallback=?',
function (data) {
$('#photolist').empty();
$.each(data.items, function (index, item) {
$('#photolist').append('<li><img src="' + item.media.m + '" align="left"/></li><br />');
});
}
);
return false;
});
});
</script>
<style type="text/css">
#photos {
margin-top: 20px;
}
#photos img {
height: 200px;
width: 250px;
margin-right: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div data-role="page" id="photos">
<form method="get" name="photoform" id="photoform">
Keyword: <input type="text" name="keyword" id="keyword" value="" /><input type="submit" name="findphoto" id="findphoto" value="Find" />
<ul data-role="listview" data-filter="false" id="photolist"></ul>
</form>
</div>
</body>
</html>
我想使用
将 Flickr API 照片显示为一栏<ul><li></li></ul>
标签。示例参考代码中的$.getJSON。但是当我 运行 它时,它不会吐出一栏中的照片。它将它们吐出 5 列。有什么建议吗?
我正在查看您的部分代码:
$('#photolist').append('<li><img src="' + item.media.m + '" align="left"/></li><br />');
这表明图片将一张叠加显示。如果是这种情况并且您对此不满意,它应该建议您希望图像彼此相邻排成一行。
如果是这样,您应该将上面的行更改为下面的行:
$('#photolist').append('<li><img src="' + item.media.m + '" align="left"/></li>');
还在样式表声明中添加以下内容:
ul#photolist li{
width: 20%;
display: inline-block;
}