Запустить
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 3 - Создание адаптивной галереи изображений на Mosaic Flow</title> <!-- Bootstrap CSS --> <link href="/examples/vendors/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- fancyBox CSS --> <link href="/examples/vendors/fancybox/jquery.fancybox.min.css" rel="stylesheet"> <style> .mosaicflow__item { padding: 3px; } .mosaicflow__column { float: left; } .mosaicflow__item img { display: block; width: 100%; height: auto; padding: 4px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; } .mosaicflow__item img:hover { opacity: 0.6; filter: alpha(opacity=60); } </style> </head> <body> <div class="container"> <h1 class="h3 text-center">Bootstrap 3 - Создание адаптивной галереи изображений подобной Pinterest на MosaicFlow</h1> <div id="mycontainer"> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/01.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/01.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/02.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/02.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/03.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/03.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/04.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/04.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/05.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/05.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/06.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/06.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/07.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/07.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/08.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/08.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/09.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/09.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/10.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/10.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/11.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/11.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/12.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/12.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/13.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/13.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/14.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/14.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/15.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/15.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/16.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/16.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/17.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/17.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/18.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/18.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/19.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/19.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/20.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/20.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/21.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/21.jpg" alt=""> </a> </div> <div class="mosaicflow__item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/22.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/22.jpg" alt=""> </a> </div> </div> </div> <!-- jQuery --> <script src="/examples/vendors/jquery/jquery-1.12.4.min.js"></script> <!-- Bootstrap JS --> <script src="/examples/vendors/bootstrap-3.3.7/js/bootstrap.min.js"></script> <!-- fancyBox JS --> <script src="/examples/vendors/fancybox/jquery.fancybox.min.js"></script> <!-- Mosiac Flow --> <script src="/examples/vendors/mosaicflow/jquery.mosaicflow.js"></script> <script> $(function () { $('#mycontainer').mosaicflow({ itemSelector: '.mosaicflow__item', minItemWidth: 300 }); }); </script> </body> </html>