请选择 进入手机版 | 继续访问电脑版
繁体中文

巅峰霸主

 找回密码
 立即注册

QQ登录

只需一步,快速开始

Bootstrap+Masonry瀑布流布局网页超简单两步完成

[复制链接]
烈火大地 发表于 2017-11-28 16:03:23 | 显示全部楼层 |阅读模式

游客只能显示部分内容,请登录后查看帖子完整内容!!!注册完全免费。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
 雖然說Bootstrap的網格系統相當的方便好用,但只要區塊內的元素大小不一致時,就會造成跑版的問題,雖然Bootstrap也有提供長短腳的解決方法,但就得去計算出,每滿12個單位數時,加入一個長短腳的修正,所以當元素有長有短時,或許改用瀑布流是一個不錯的方式。
  但要如何將瀑布流的套件與Bootstrap網格系統整合在一塊,其實方法很簡單,當整合後不但讓Bootstrap的網格支援瀑布流排版,同時還能透過Bootstrap內建的網格規則,來控制瀑布流的行列數,至於要怎麼在Bootstrap中使用Masonry套件,現在就一塊來看看吧!
Step1
首先,先在body中加入bootstrap的html網格標籤。

  1. <div class="container">
  2. <div class="row">
  3. <div class="col-md-3">
  4. <img src="01.jpg" alt="" class="img-responsive">
  5. </div>
  6. <div class="col-md-3">
  7. <img src="02.jpg" alt="" class="img-responsive">
  8. </div>
  9. <div class="col-md-3">
  10. <img src="03.jpg" alt="" class="img-responsive">
  11. </div>
  12. <div class="col-md-3">
  13. <img src="04.jpg" alt="" class="img-responsive">
  14. </div>
  15. </div>
  16. </div>
复制代码


Step2
由於圖片有直有橫,這時就會造成跑版的問題。
梅問題-Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流版型
Step3
接著在/body前,加入下方的script。
  1. <script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
  2. <script>
  3. $(function(){
  4. $('.masonry').masonry({
  5. itemSelector: '.item'
  6. });
  7. </script>
复制代码


Step4
再把row後加入「masonry」,以及把col-md-3後再加入「item」。
  1. <div class="row masonry">
  2. <div class="col-md-3 item">
复制代码


Step5
完成後,這時版型就支援瀑布流的排版了。

Step6
當把col-md-3改成col-md-6,這是瀑布流就會變成二欄式,因此透過Bootsrap內建的網格數,就可任意的調整瀑布流的欄位數,是不是超方便的呀!

完整demo:

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <title>梅問題範例展示「Bootstrap網格+Masonry瀑布流網格」</title>
  5.                 <meta charset="UTF-8">
  6.                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.                 <!-- Bootstrap -->
  8.                 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  9.                 <!-- HTML5 shim 和 Respond.js 讓IE8支援HTML5元素和媒體查詢 -->
  10.                 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  11.                 <!--[if lt IE 9]>
  12.                         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  13.                         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  14.                 <![endif]-->
  15.                 <style type="text/css">
  16.                         .item{
  17.                                 margin-bottom: 10px;
  18.                                 padding-left: 5px;
  19.                                 padding-right: 5px;
  20.                         }
  21.                 }
  22.                 </style>
  23.         </head>
  24.         <body>
  25.                 <div class="container">
  26.                         <div class="row masonry">
  27.                                 <div class="col-md-3 item"><img src="img/01.jpg" alt="" class="img-responsive"></div>
  28.                                 <div class="col-md-3 item"><img src="img/03.jpg" alt="" class="img-responsive"></div>
  29.                                 <div class="col-md-3 item"><img src="img/017.jpg" alt="" class="img-responsive"></div>
  30.                                 <div class="col-md-3 item"><img src="img/02.jpg" alt="" class="img-responsive"></div>
  31.                                 <div class="col-md-3 item"><img src="img/013.jpg" alt="" class="img-responsive"></div>
  32.                                 <div class="col-md-3 item"><img src="img/05.jpg" alt="" class="img-responsive"></div>
  33.                                 <div class="col-md-3 item"><img src="img/015.jpg" alt="" class="img-responsive"></div>
  34.                                 <div class="col-md-3 item"><img src="img/09.jpg" alt="" class="img-responsive"></div>
  35.                                 <div class="col-md-3 item"><img src="img/010.jpg" alt="" class="img-responsive"></div>
  36.                                 <div class="col-md-3 item"><img src="img/011.jpg" alt="" class="img-responsive"></div>
  37.                                
  38.                         </div>
  39.                 </div>

  40.                 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  41.                 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  42.                 <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  43.                 <script>
  44.                         $(function(){
  45.                                 $('.masonry').masonry({
  46.                                           itemSelector: '.item'
  47.                                         });
  48.                         });
  49.                 </script>
  50.         </body>
  51.         </html>
复制代码


demo演示查看:https://photo.minwt.com/file/sam ... tstrap-masonry.html
回复

使用道具 举报

QQ|小黑屋|手机版|Archiver|巅峰霸主 ( 京ICP备12023415号-2 )

JS of wanmeiff.com and vcpic.com Please keep this copyright information, respect of, thank you!JS of wanmeiff.com and vcpic.com Please keep this copyright information, respect of, thank you!

声明:本站的任何信息和内容仅代表作者的立场和观点,与巅峰霸主网无关。

禁止在巅峰霸主网发布任何与《中华人民共和国法律》相抵触的言论!

GMT+8, 2018-6-21 06:40 , Processed in 0.139005 second(s), 28 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表