Адаптивное поле, используйте полную ширину - стиль сетки альбома iTunes - PullRequest
Новая
       1

Адаптивное поле, используйте полную ширину - стиль сетки альбома iTunes

0 голосов
/ 15 июня 2011

Я работаю над веб-приложением, в котором будет отображаться большое количество миниатюр.Я хотел бы добиться поведения, используемого в iTunes при отображении альбомов в виде миниатюр в сетке (не Coverflow).Идея заключается в том, что миниатюры имеют фиксированный размер, а контейнерный элемент имеет ширину жидкости.В одну строку должно быть помещено как можно больше миниатюр, а поле между миниатюрами должно быть адаптивным, чтобы миниатюры всегда занимали 100% ширину контейнера.

См. Два изображения ниже:

Четыре миниатюры, использующие полную ширину

Несколько меньшее окно, в которое помещаются три миниатюры, которые по-прежнему занимают всю ширину за счет увеличения поля

Если это возможно сделать с помощью CSS, это предпочтительнее, в противном случае я также был бы признателен за решения JavaScript / jQuery.

Ответы [ 3 ]

1 голос
/ 15 июня 2011

Как и обещал, я кодировал это для вас.Для оценки требуемой маржи используется следующий jquery: 

var thewidth = 0;
$('.album').each(function(){
   thewidth = thewidth +  $(this).width();
});

var numberofdivs = $('#coolio').width() / $('.album').width();
numberofdivs = Math.floor(numberofdivs).toFixed(0)
if (numberofdivs >= $('.album').size()){
    numberofdivs = $('.album').size();
};

var widthleft = $('#coolio').width() - ($('.album').width() * numberofdivs);

var margin = (widthleft / numberofdivs) / 2;
$('.album').attr('style', 'margin-left:'+margin+'px; margin-right:'+margin+'px');

http://jsfiddle.net/ajthomascouk/dMAdm/

Выполнить сначала.:)

0 голосов
/ 17 июня 2011

Внесены некоторые небольшие улучшения в сценарий, данный Алексом, чтобы полностью удовлетворить мои потребности.Теперь первая миниатюра в каждой строке не получает левого поля, а последняя миниатюра в каждой строке не получает правого поля, так что миниатюры действительно дают нам полную ширину контейнера div.Также используется .outerWidth () jQuery вместо .width () для получения ширины миниатюры, так что вы можете использовать границы и т. Д. Без ущерба для расчетов.Теперь скрипт также запускается, как только загружается DOM, чтобы рассчитать правильный запас с начала, а не только при изменении размера окна.

Вот новый скрипт: 

<script type="text/javascript">
$(document).ready(calculateThumbnailMargin);
$(window).resize(calculateThumbnailMargin);

function calculateThumbnailMargin() {

    // Define a minimum margin
    var minimumMargin = 20;

    // Get the outer width of the thumbnail (including padding and border)
    var thumbWidth = $('.video-thumbnail-container').outerWidth();

    // Calculate how man thumbnails can fit on one row
    var numberofdivs = $('#content-area').width() / thumbWidth;
    numberofdivs = Math.floor(numberofdivs).toFixed(0);

    if (numberofdivs >= $('.video-thumbnail-container').size()) {
        numberofdivs = $('.video-thumbnail-container').size();
    };

    // Calculate the remaining width of the row  
    var widthleft = $('#content-area').width() - (thumbWidth * numberofdivs);

    // Calculate the proper margin to use
    var margin = (widthleft / (numberofdivs - 1)) / 2;

    // Check that the margin is not less than the minimum margin
    if (margin < minimumMargin) {
        // Use one less thumnail on each row
        numberofdivs = numberofdivs - 1;

        // Calculate the remaining width of the row  
        widthleft = $('#content-area').width() - (thumbWidth * (numberofdivs));

        // Calculate the proper margin to use
        margin = (widthleft / (numberofdivs - 1)) / 2;
    }

    // Add the proper margin to each thumbnail
    $('.video-thumbnail-container').attr('style', 'margin-left:' + margin + 'px; margin-right:' + margin + 'px');

    // Remove the left-margin on the first thumbnail on each row and the right-margin on the last thumbnail on each row
    for (i = 0; i < $('.video-thumbnail-container').size(); i = i+numberofdivs) {
        $(".video-thumbnail-container:eq(" + i + ")").css('marginLeft', 0);
        $(".video-thumbnail-container:eq(" + (i + numberofdivs - 1) + ")").css('marginRight', 0);
    }
}

0 голосов
/ 15 июня 2011

мы можем сделать это, используя css, здесь код http://jsfiddle.net/yuliantoadi/SMNWt/, это то, что вы имеете в виду?

CSS: 

.dsgnPgs { margin-top:25px; }
.dsgnPgs li { float:left; width:130px; height:130px; margin-left:10px; margin-bottom:10px; border:1px solid #a6a6a6; background:#e6e6e6; }
.dsgnPgs li:hover { background:#fff; }
.dsgnPgs li h2 { margin:0; padding:0; text-align:center; border:none; }
.dsgnPgs li h2 a { display:block; width:80%; height:70%; padding:20% 10% 10%; }

HTML: 

<ul class="dsgnPgs">
    <li><h2><a href="" target="_blank">test</a></h2></li>
    <li><h2><a href="" target="_blank">Catalog</a></h2></li>
    ..
</ul>
...