How to create a Pinterest-like grid in Bootstrap v4.0 without jQuery (black with same width & different height)

时间：2018-02-03 11:09:08

标签： html css twitter-bootstrap grid bootstrap-4

Is it possible to create a Pinterest-like grid with Bootstrap 4?
I know there are jQuery Plugins available, but is there no way without them? I mean pure css.

Note : This is not like that or a duplicate question. But please try to understand my question first. I have to do without jQyery. Just do it from CSS, and do not even use Column in CSS because the order of the list is changed from the Column. i hope you understand my question.

This is what I have now:
Wrong list

But I want this : right list

My current code:

 <!DOCTYPE html>
        <html>
        <head>
            <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
            <style type="text/css">
                .items{
                    background-color: #999;
                    margin: 5px 0;
                }
            </style>
        </head>
        <body>
            <div class="row">
                <div class="col-4"><div class="items">1<br><br><br></div></div>
                <div class="col-4"><div class="items">2<br><br></div></div>
                <div class="col-4"><div class="items">3<br><br><br><br></div></div>
                <div class="col-4"><div class="items">4<br><br></div></div>
                <div class="col-4"><div class="items">5<br></div></div>
                <div class="col-4"><div class="items">6<br><br></div></div>
                <div class="col-4"><div class="items">7<br><br><br><br></div></div>
                <div class="col-4"><div class="items">8<br><br></div></div>
                <div class="col-4"><div class="items">9<br><br><br><br></div></div>
                <div class="col-4"><div class="items">10<br><br></div></div>
                <div class="col-4"><div class="items">11<br><br><br><br></div></div>
                <div class="col-4"><div class="items">12<br><br></div></div>
            </div>
        </body>
        </html>

3 个答案:

答案 0 :(得分：1)

要在Bootstrap 4中实现此效果，您可以使用card-columns，如下所示。

这使得仅使用本机Bootstrap 4类完成工作，并且不需要任何自定义css。

点击下面的“运行代码段”按钮，然后展开到整页：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card-columns">
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Card title that wraps to a new line</h5>
            <p class="card-text">This is a longer card with supporting text.</p>
        </div>
        <img class="card-img-bottom" src="https://placeimg.com/900/300/animals" alt="Card image cap">
    </div>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Card title that wraps to a new line</h5>
            <p class="card-text">This is a longer card with supporting text.</p>
        </div>
        <img class="card-img-bottom" src="https://placeimg.com/900/600/animals" alt="Card image cap">
    </div>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        <img class="card-img-bottom" src="https://placeimg.com/900/200/arch" alt="Card image cap">
    </div>
    <div class="card">
        <img class="card-img-top" src="https://placeimg.com/900/400/nature" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>

    <div class="card">
        <img class="card-img-top" src="https://placeimg.com/900/300/arch" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="https://placeimg.com/940/500/animals" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title that wraps to a new line</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="https://placeimg.com/900/900/people" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title that wraps to a new line</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src="https://placeimg.com/940/800/nature" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>

    <div class="card">
        <img class="card-img" src="https://placeimg.com/940/300/tech" alt="Card image">
    </div>
    <div class="card bg-primary text-white text-center p-3">
        <blockquote class="blockquote mb-0">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
            <footer class="blockquote-footer">
                <small>
                    Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
            </footer>
        </blockquote>
    </div>
    <div class="card text-center">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>

    <div class="card p-3 text-right">
        <blockquote class="blockquote mb-0">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer class="blockquote-footer">
                <small class="text-muted">
                    Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
            </footer>
        </blockquote>
    </div>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
    <div class="card p-3">
        <blockquote class="blockquote mb-0 card-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer class="blockquote-footer">
                <small class="text-muted">
                    Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
            </footer>
        </blockquote>
    </div>
</div>

答案 1 :(得分：-1)

您可以尝试Mansonry，它不需要jQuery。

答案 2 :(得分：-1)

这是你在找什么？ 纯css

Pinterest使用javascript来实现这种布局。很长一段时间以来，我一直在考虑用纯CSS复制它，现在它就是：

＆＃13;
＆＃13; 
body{
    background:#eee;
    font-family:BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif
}
h1{
    width:90%;
    background:#fff;
    padding:0.5em;
    text-align:center;
    border-radius:5px;
    font-size:15px;
    font-weight:600;
    margin:0 auto
}
.container{
    column-width:250px;
    column-gap:15px;
    max-width:100%;
    margin:30px auto
}
.container>div{
    display:inline-block;
    column-break-inside:avoid;
    background:#fff;
    border-radius:5px;
    margin-bottom:1em;
    font-weight:bold;
    color:#666
}
.container>div>div{
    padding:1em 1em 1em 1em
}
img{
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:5px 5px 0 0
}
＆＃13; 
<body style='background:#eee;'>
   <div class='container'>
      <div>
         <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGbwy5hxX7ff_m0Ihj0mrzf8XVbdakQ_boPtH-0aekfsUOyB1z' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://www.dailypioneer.com/uploads/main/mn_story_image/T330_158723_Untitled-2.gif' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://www.tollymasala.com/TollyAdmin/gallery/756/watermark/ankita-Spicy-Actress-In-Rain-cute-photo-stills.jpg' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://ste.india.com/sites/default/files/2016/12/30/559004-301216-gs-tch-10.jpg' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://www.newscrab.com/wp-content/uploads/2017/12/Parineeti-Chopra.jpg' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='https://dailypost.in/wp-content/uploads/2017/08/27-29.jpg' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://us.sulekhalive.com/images/photos/thumbnailfull/photos-2013-12-30-2-39-17.jpg' />
         <div><span>aaaaa.png</span></div>
      </div>
      <div>
         <img src='http://www.gulte.com/content/2016/11/news/1478346624-1517.jpg' />
         <div><span>aaaaa.jpg</span></div>
      </div>
      <div>
         <img src='https://i.pinimg.com/736x/35/10/c2/3510c27bfc544b3331717b2b03d6407a--heroines-cinema.jpg' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://www.telugusquare.com/wp-content/uploads/2015/06/Rakul-Preet-Singh-14.jpg' />
         <div><span>aaaaa</span></div>
      </div>
   </div>
</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题