在调整窗口大小时更改 html 标记结构

Question

我想在调整浏览器窗口大小时将 html 标记结构重建为新结构。有谁知道我如何从第一个结构到第二个结构。我需要这个用于响应式个人项目。也许有一个 JavaScript 调整大小事件，我不知道......

<div class="wrapper">
    <div class="slide">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="slide">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

<div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Answer 1

您可以在窗口上监听resize 事件，然后在窗口低于特定大小时重新构建您的 HTML。将元素从第一个结构移动到第二个结构并不是什么大问题，但挑战在于再次恢复它。你怎么知道哪个.item属于哪个.slide？

一种方法是在创建列表时在单独的data- 属性中跟踪每个.item 的父级：

function makeList() {
    var $slides = $('.slide'),
        $items = $();

    // For each slide set a data-attribute on all its child .item's 
    $slides.each(function(i) {
        var $item = $(this).children('.item');

        $item.attr('data-slide', i+1);
        $items = $items.add($item);
    });

    // Append all items directly to the wrapper
    $('.wrapper').html($items).attr('data-structure', 'list');
}

我为.wrapper 设置了一个数据属性，所以我们知道它已经转换为一个列表。否则在每次调整大小时都会触发它，您只需要一次（直到它调整回您想要幻灯片的位置）。

当您再次需要幻灯片时，请遍历所有 .items 并保留幻灯片编号列表。对于您遇到的每个新的data-slide 号码，制作一张新幻灯片并将其添加到总列表中；

function makeSlides() {
    var $slides = $(),
        slideNumbers = [],
        $currentSlide = $();

    $('.item[data-slide]').each(function() {
        var $item = $(this),
            slideNumber = $item.attr('data-slide');

        // if the slide number wasn't in the array yet push the current slide into $slides and create a new one
        if(slideNumbers.indexOf(slideNumber) < 0) {
            $slides = $slides.add($currentSlide);
            $currentSlide = $('<div class="slide" />');

            slideNumbers.push(slideNumber);
        }
        $currentSlide.append($item);
    });

    // add the last currentSlide
    $slides = $slides.add($currentSlide);

    // place all slides in the wrapper
    $('.wrapper').html($slides).attr('data-structure', 'slides');
}

最后你绑定 resize 事件并在需要时触发这些函数：

$(window).resize(function(e) {
    var currentStructure = $('.wrapper').attr('data-structure');

    if(window.innerWidth < 600) {
        if( currentStructure !== 'list') {
            makeList();
        }
    } else {
        if( currentStructure !== 'slides') {
            makeSlides();
        }
    }
});

jsFiddle 演示：http://jsfiddle.net/gktLnw31/3/

我确实认为这可能会更有效率，但这只是一个概念证明。希望它能给你一些见解。

Answer 2

我最好看一下foundation，因为它已经默认包含响应式设计，而不是尝试通过代码动态更改它