Удаление лишнего промежутка для контейнера Masonry, используя расположение жидкости

0

Я пытаюсь создать галерею изображений с помощью масонства, и изображения будут перенаправлены при изменении размера браузера.

Однако, поскольку я использую фиксированную ширину 150 пикселей для уменьшенных изображений (следовательно, фактический большой файл изображения не загружен), но я не могу удалить промежутки доступа для сторон контейнера изображений, поскольку он будет масштабироваться на основе размер экрана в процентах используется для ширины.

Макет сайта выглядит так:

раскладка

Фактическая компоновка

Обратите внимание, что есть избыточное расстояние справа от контейнера изображения. В итоге,

  1. Как сделать шкалу контейнера размером сетки изображений масонства, поскольку контейнер изображения вычисляется на основе ширины через процент?

  2. Имеет ли смысл фиксировать изображение до ширины 150 пикселей? Если нет, то какой предпочтительный метод отображения эскизов для экранов с различными размерами?

HTML

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>App</title>
    <link rel="stylesheet" href="/static/css/style.css" />
    <link rel="stylesheet" href="/static/css/reset.css" />

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <script src="/static/js/jquery-1.11.0.min.js"></script>
    <script src="/static/js/masonry.pkgd.min.js"></script>
    </head>
        <body>
        <div id="wrapper">
        <!-- the header and navigation -->
            <div id="header">
                <div id="navigation">
                    <ul>
                        <li><a href="#">Navigation1</a></li>
                        <li><a href="#">Navigation2</a></li>
                    </ul>
                </div>     
            </div>
            <!-- the content -->
            <div id="content">
        <!--- Image container -->
            <div id="gallery_container">
               <ul>
                 <li>
                    <img src="http://127.0.0.1:8001/media/images/d4RYJ4U_1.jpg" />
                </li>
                <li>
                    <img src="http://127.0.0.1:8001/media/images/hJLK7.jpg" />
                </li>
                <li>
                    <img src="http://127.0.0.1:8001/media/images/vx7IB5M.jpg" />
                </li>
                <li>
                    <img src="http://127.0.0.1:8001/media/images/9wMgVOw.png" />
                </li>
              </ul>
            </div>
        <!--Articles sidebar -->
            <div id="sidebar">
                <p>Sidebar</p>
            </div>           
        <!-- the footer -->
            <div id="footer">
                <p>Footer</p>
            </div>
        </div>
        <script>
        var columns;
            $(document).ready(function() {
                $('#gallery_container').masonry({
                    gutter: 12,
                    itemSelector: '#gallery_container ul li img',
                    columnWidth: 150         
                });
            });
        </script>
    </body>
</html>

CSS

#wrapper {
    margin-right: auto;
    margin-left: auto;
    width: 96%; 
}
#header {
    margin-right: 1.0416667%; /* 10 div 960 */
    margin-left: 1.0416667%; /* 10 div 960 */
    width: 97.9166667%; /* 940 div 960 */
    background-color: #779307;
}
#navigation {
    padding-bottom: 25px;
    margin-top: 26px;
    margin-left: -1.0416667%; /* 10 div 960 */
    padding-right: 1.0416667%; /* 10 div 960 */
    padding-left: 1.0416667%; /* 10 div 960 */
    width: 97.9166667%; /* 940 div 960 */
}
#navigation ul li {
    display: inline;
    margin-right: 2.6595745%; /* 25 div 940 */
}    
#navigation ul li a {
    height: 42px;
    line-height: 42px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Arial, "Lucida Grande", Verdana, sans-serif;
    font-size: 27px;
    color: black;
}
#content {
    margin-top: 58px;
    margin-right: 1.0416667%; /* 10 div 960 */
    float: right;
    background-color: #dedede;
    width: 72.7083333%; /* 698 div 960 */
}
#sidebar {
    border-right-color: #e8e8e8;
    border-right-style: solid;
    border-right-width: 2px;
    margin-top: 58px;
    padding-right: 1.0416667%; /* 10 div 960 */
    margin-right: 1.0416667%; /* 10 div 960 */
    float: left;
    width: 22.7083333%; /* 218 div 960 */
    background-color: #fe9c00;
}
#footer {
    float: left;
    margin-top: 20px;
    margin-right: 1.0416667%; /* 10 div 960 */
    margin-left: 1.0416667%; /* 10 div 960 */
    clear: both;
    width: 97.9166667%; /* 940 div 960 */
    background-color: #663300;
}
#gallery_container {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    background-color: #302200;
}
#gallery_container ul li {
    display: inline;
}
#gallery_container ul li img {
    padding-top: 10px;  
}
  • 0
    Было бы проще, если бы вы создали jsfiddle этого, чтобы мы могли поиграть с ним, но первое, что нужно сделать, это попытаться сделать #gallery_container display: inline-block, чтобы он не растягивался на всю ширину своего родителя.
  • 0
    Привет Билли, jsfiddle создал здесь ссылку
Теги:
jquery-masonry
fluid-layout

1 ответ

0

Я думаю, что ваша скрипка не работает должным образом... Во всяком случае, есть опция "isFitWidth": true чтобы намекнуть на кладку, чтобы заполнить все горизонтальное пространство. Попробуй.

  • 0
    извините .. обновил ссылку jsfiddle здесь

Ещё вопросы

Сообщество Overcoder
Наверх
Меню