如何设置每行4张图像？

时间：2016-07-09 02:13:36

标签： jquery html css3

我有一个页面可以根据用户输入的内容从Flickr API中提取图像。现在，图像被检索并显示在每个4的内联块列表中。但是，如果图像比其他图像更宽或更窄，它将与其他图像的宽度冲突，并且最终会在它自己的线上或者将其推到它自己的线上。

如何确保在任何时候连续显示四个图像，并且任何新行也有4个图像。另外，我在列表项上的边框究竟是什么。我为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>

4 个答案:

答案 0 :(得分：0)

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

$.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>';
  }
});

也将#photos更改为div，因为你不能在ul中使用div

答案 1 :(得分：0)

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

我的代码：

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 */
}

/ * border * / 

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

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

我的调整代码：

$(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: 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;
}  
<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>

答案 2 :(得分：0)

如果您使用的是Bootstrap，则无需编写自己的样式来制作列，只需按照Bootstrap Grid System instructions进行操作。

删除你的样式并使用这个标记（不需要使用ul/li 1 ）。

function flickerData (data) {
    var photoHTML = '<div class="row">';

    $.each(data.items, function(i,photo) {
        photoHTML += '<div class="col-md-3">';
        photoHTML += '<a href="'+photo.link+'">';
        photoHTML += '<img src="'+photo.media.m+'"></a></div>';
    });

    photoHTML += "</div>";

    $('#photos').html(photoHTML);
}

1 您当前的HTML标记语法无效，您无法将<div>元素直接放在ul上。

答案 3 :(得分：0)

调整代码

<!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/

中查看它
相关问题
最新问题