个人中心
gpt4 book ai didi

jquery - 如何设置每行 4 个图像？

转载 作者：行者123 更新时间：2023-11-28 05:35:10 25 4
gpt4 key购买 nike

我有一个页面，它根据用户输入的内容从 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/

25 4 0
文章推荐： javascript - 显示按钮以在滑动后向下滑动标题
文章推荐： c++ - QProgressDialog 没有关闭
文章推荐： c++ - Qt C++ XML 意外字符
文章推荐： javascript - 我需要使用父类替换嵌套 div 中的引导类名称
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com