Nano Hash - криптовалюты, майнинг, программирование

Изотопные и медиа-запросы

Абсолютно выдергивая мои волосы на этом. Похоже, что на GitHub нет черно-белых решений, что странно, поскольку кажется довольно простой концепцией. Возможно, я просто не понимаю.

По сути, я пытаюсь создать гибкое и отзывчивое портфолио, используя Изотоп для фильтрации предметов. Фильтрация работает нормально, 4 столбца полностью плавные, и все выглядит отлично, когда вы изменяете размер окна.

ОДНАКО, для макетов для мобильных устройств и планшетов мне просто нужно адаптировать макет с четырех колонок к макету двух колонок.

Я пробовал это:

$(window).load(function(){

    var $container = $('#thumbs');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
       },
    });

    // initialize Isotope
    $container.isotope({
      // options...
      resizable: false, // disable normal resizing
      // set columnWidth to a percentage of container width
      masonry: { columnWidth: $container.width() / 4 },
    });

    // update columnWidth on window resize
    $(window).smartresize(function(){
        $container.isotope({
            // update columnWidth to a percentage of container width
            masonry: { columnWidth: $container.width() / 4 }
        });
    });

// My attempt at using media queries to change 'columnWidth'
    $(window).resize(function() {
        var width = $(window).width();
        if (width < 768) {
            $container.isotope( {
                // update columnWidth to half of container width
                masonry: { columnWidth: $container.width() / 2 }
            });
        }
    });
});

Не сработало :(

Любая помощь приветствуется.

responsive-design fluid media-queries jquery-isotope
05.10.2012

Ответы:


1

Это должно работать, чтобы установить количество столбцов. Затем вы просто делите на columns.

var columns;

// set column number
setColumns();

// rerun function when window is resized 
$(window).on('resize', function() {
  setColumns();
});

// the function to decide the number of columns
function setColumns() {
  if($(window).width() <= 768) {
    columns = 2;
  } else {
    columns = 4;
  }
}
17.10.2012
  • Я понял, почему мой не работал. В функции $container.isotope({ я использовал masonry: {columnWidth: $container.width() / 4} вместо columns: 4. Сортировка. Спасибо еще раз. 26.10.2012
  • Привет @Salmonface У меня та же проблема, я не могу изменить макет на два столбца, когда окно сжимается ... как вы это исправили? var $container = $('#filter_container'); $container.isotope({ itemSelector : '.element', resizable: false, // disable normal resizing masonry: { columnWidth: $container.width() / 3 } }); // update columnWidth on window resize $(window).smartresize(function(){ $container.isotope({ // update columnWidth to a percentage of container width masonry: { columnWidth: $container.width() / 3 } }); }); 11.12.2012
  • Привет, @Grundizer. Я исправил это с помощью медиа-запроса jQuery: $(window).smartresize(function(){ if ($(window).width() < 768) { $container.isotope({ columns: 2 });} if ($(window).width() > 768) { $container.isotope({ columns: 3 });}}); Однако моя сетка изменчива, поэтому ширина и поля моих столбцов основаны на процентах, что, очевидно, требует обновления в вашем CSS с помощью медиа-запроса, когда вы адаптируете количество столбцов. . 04.01.2013
  • Пример см. в разделе портфолио на моем веб-сайте. Извините, код организован не очень хорошо. 04.01.2013

    • 2

    Я думаю, что есть более приятный способ, где вы все еще можете использовать медиа-запросы css. Смотрите мой ответ здесь: https://stackoverflow.com/a/20270911/1010892

    Надеюсь, это поможет!!

    28.11.2013
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..