文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何设置每行图像4行？

问如何设置每行图像4行？
EN

Stack Overflow用户
提问于 2016-07-09 02:13:36
回答 3查看 43关注 0票数 0

我有一个页面，它根据用户输入的内容从Flickr中提取图像。现在，图像将被检索并显示在一个内联块列表中，每个列表为4个。然而，如果一个图像比其他图像更宽或更窄，它将与其他图像的宽度发生冲突，或者在它自己的线上结束，或者将它推到自己的线上。

如何确保每时每刻都有四个图像显示在一行中，任何新的行都有4个图像。另外，我在列表项目中的边框中遗漏了什么。我在li标签和img标签中添加边框样式，但没有显示？

谢谢你的洞察力。

​

代码语言：javascript
复制
$(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
    
    
    
    
    
    
});
代码语言：javascript
复制
}

form{
    margin-top: 5%
}

ul{
    display: block;
    list-style-type: none;
    
    

}

li {
    
    margin: 30px 0px;
    width: 25%;
    float: left;
    padding: 3%;
    display: inline-block
    
}
代码语言：javascript
复制
<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>

​

jquery
html
css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-07-09 03:10:02

修改您的代码

代码语言：javascript
复制
<!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>

您也可以在这里用代码查看它，http://codepen.io/arsho/full/NAabPL/

票数 0
EN

Stack Overflow用户

发布于 2016-07-09 02:23:31

您可以使用索引"i“和%运算符。确保容器div中有类行。

代码语言：javascript
复制
$.each(data.items, function(i,photo) {
  if ( i % 4 === 0) {
    photoHTML+='<div style="border:1px solid black">';
  }      

  photoHTML+='<li>';
  photoHTML += '<a href="'+photo.link+'">';
  photoHTML += '<img src="'+photo.media.m+'"> </a> </li>';

  if ( i % 4 === 0) {
    photoHTML+='</div>';
  }
});

还将#照片更改为div，因为您不能在ul中拥有div。

票数 0
EN

Stack Overflow用户

发布于 2016-07-09 02:25:34

您拥有的html似乎有一个备用ul btw：

我的代码：

代码语言：javascript
复制
ul{
display: flex;
flex-wrap:wrap;
justify-content:space-between;
width:1170px;
list-style-type: none;
}

 ul li.col-md-3 {
 padding:0;
 width:auto;
 }

div.containment {    
margin: 30px 0px;
flex:1 1 ((1170px / 4) - (12px * 4)); /* 12px times 4 to allow for borders */
}

/*边界*/

代码语言：javascript
复制
div.containment {    
border:3px dotted Pink;
box-sizing-border-box;
}  

 div.containment li img {    
border:3px double cyan;
box-sizing-border-box;
}

您的代码与我的调整：

​

代码语言：javascript
复制
$(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
    
    
    
    
    
    
});
代码语言：javascript
复制
}

form{
    margin-top: 5%
}

ul{
display: flex;
flex-wrap:wrap;
justify-content:space-between;
width:1170px;
list-style-type: none;
}

 ul li.col-md-3 {
 padding:0;
 width:auto;
 }

div.containment {    
margin: 30px 0px;
flex:1 1 ((1170px / 4) - (12px * 4)); /* 12px times 4 to allow for borders */
}  

/* borders */

div.containment {    
border:3px dotted Pink;
box-sizing-border-box;
}  

div.containment li img {    
border:3px double cyan;
box-sizing-border-box;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/38277614

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档