Fatal编程技术网
  • javascript/
  • Javascript 如何显示具有相同高度的所有文章

Javascript 如何显示具有相同高度的所有文章

javascript jquery html css

Javascript 如何显示具有相同高度的所有文章,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在一个网站上工作，我想在那里显示我的youtube频道推荐的视频。我可以加载所有视频并显示它们，但在4-5行之后出现问题。有些视频高出几毫米，破坏了整个布局 这是前两排，应该是怎样的 然后第4行和第5行看起来像这样 第一行中的第三个视频高出几毫米，这破坏了整个布局，因此如何将所有单元格格式化为相同的格式我已尝试将display:table添加到父级，并将display:table单元格添加到子级，但未成功 下面是HTML和JS <!DOCTYPE html> <html

我正在一个网站上工作，我想在那里显示我的youtube频道推荐的视频。我可以加载所有视频并显示它们，但在4-5行之后出现问题。有些视频高出几毫米，破坏了整个布局

这是前两排，应该是怎样的

然后第4行和第5行看起来像这样

第一行中的第三个视频高出几毫米，这破坏了整个布局，因此如何将所有单元格格式化为相同的格式我已尝试将display:table添加到父级，并将display:table单元格添加到子级，但未成功

下面是HTML和JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <link href="../css/youtube.css" type ="text/css" rel="stylesheet">
    <link href="../css/navigation.css" type ="text/css" rel="stylesheet">



</head>
<body>
<div id ="main">
<div class="menu">


    <div class="hori-menu">
    <ul>
      <ul>
          <li><a href="#home">Weiterschauen</a></li>
          <li><a href="userseries.html">Meine Serien</a></li>
          <li><a href="soon.html">Demnächst</a></li>
          <li><a href="suggestion.html">Vorschläge</a></li>
          <li><a class="active" href="youtube.html">YouTube</a></li>
          <li><a href="#about">Mitbewohner</a></li>
        </ul>
    </ul>
    </div>
    </div>


    <main id="container">
        <section id="video"></section>
        <div id="videos"></div>
    </main>


</body>

<script language="JavaScript">
    var key = '...';
    var videos = [];
    var totalResults = 0;

    $(document).ready(function(){
        getMyChannel();
    });

    function shuffle() {
        for (let i = videos.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [videos[i], videos[j]] = [videos[j], videos[i]];
        }

    }



    function getMyChannel(){
        var url = "https://www.googleapis.com/youtube/v3/activities";
        var options = {
            part: 'contentDetails',
            channelId: 'UCAe66hs74KDbpvK2x3ZrTXA',
            maxResults: 20,
            key: key
        }
        loadUser();

        function loadUser(){
            $.getJSON(url, options, function(data){
                loadUsersChannels(data);
            });
        }

        function loadUsersChannels(data){

            $.each(data.items, function (i, item) {
                var id = item.contentDetails.subscription.resourceId.channelId;
                getChannel(id);
            });
        }
    }



    function getChannel(id){
        var url = "https://www.googleapis.com/youtube/v3/channels";
        var options = {
            part: 'snippet,contentDetails',
            id: id,
            maxResults: 20,
            key: key

        }

        loadLists();

        function loadLists(){
            $.getJSON(url, options, function(data) {
                loadPlaylists(data);

            });

        }

        function loadPlaylists(data){
            $.each(data.items, function (i, item) {
                var id = item.contentDetails.relatedPlaylists.uploads;
                getPlaylist(id);
            });

        }
    }





    function getPlaylist(playlistId){

    var URL = 'https://www.googleapis.com/youtube/v3/playlistItems';


    var options = {
        part: 'snippet',
        key: key,
        maxResults: 20,
        playlistId: playlistId
    }

    loadVids();

    function loadVids() {
        $.getJSON(URL, options, function (data) {
           // var id = data.items[0].snippet.resourceId.videoId;
           // mainVid(id);
            resultsLoop(data);
        });
    }

    function mainVid(id) {
        $('#video').html(`
            <iframe width="560" height="315" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        `);
    }


    function resultsLoop(data) {


        totalResults = totalResults + data.pageInfo.resultsPerPage;

        $.each(data.items, function (i, item) {

            var thumb = item.snippet.thumbnails.medium.url;
            var title = item.snippet.title;
            var vid = item.snippet.resourceId.videoId;

            $('#videos').append(`
                <article class="item" data-key="${vid}">
                        <div class="details">
                        <img src="${thumb}" alt="" class="thumb">   
                        <h4>${title}</h4>
                    </div>
                </article>
            `);
        });

    }

        // CLICK EVENT
    $('main').on('click', 'article', function () {
        var id = $(this).attr('data-key');
        mainVid(id);
    });

}



    </script>
  </body>
</html>
有关代码的更多信息，请询问。谢谢大家!

您可以尝试在文章divs上使用
最小高度
或
最大高度
CSS属性。

查看flexbox：我会使用flexbox或网格。我使用flexbox解决了我的问题 
@mixin font-base {
    padding: 0;
    margin: 0;
    line-height: 1.3;
    font-weight: 600;
}

h4 {
    @include font-base;
}

p {
    @include font-base;
    color: grey;
    font-size: 0.7rem;
}


.container {
    width: 100%;
    background-color: #fff;
    margin: 0 auto;
    display:table;
    border-spacing: 10px;
}


section {
    height:100%;
    margin-top: 4%;
    margin-bottom:2%;
    text-align:center;
    background-color:#eee;



}
iframe{
    width:100%;
    height:900px;   
    background-color:#65626b;
    padding:8px 12px;
}
#videos{
    overflow:hidden;
}

article {
    margin:5px 5px;
    width:24%;
    float:left;
    background-color:#eee;
    border-radius:8px;



}
article div{
    border: 1px solid black;
    border-radius: 8px;
    padding: 8px 12px;


}
article:hover{
    background-color:#65626b;
    color:white;

}

.thumb {
    width: 100%;
    border-radius:8px;
}