Question

我目前正在使用isotope（无限滚动）来创建响应式网页设计。

(function() {
    var $container = $('#container');

    $container.isotope({
        itemSelector : '.element'
    });

    $container.infinitescroll({
        navSelector  : '#page_nav',    // selector for the paged navigation 
        nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
        itemSelector : '.element',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
        }
    },
    // call Isotope as a callback
    function( newElements ) {
        $container.isotope( 'appended', $( newElements ) ); 
    }
);
});

对于更大的变化，我尝试将其与this script结合使用，但所有元素都会重叠。

作为参考，这是旋转功能：

$("#gallery2 img").each(function() {
    var rNum = (Math.random() * 4) - 2;  
    $(this).css({
        '-webkit-transform': 'rotate(' + rNum + '2deg)',
        '-moz-transform': 'rotate(' + rNum + '2deg)'  
    });
});

如何将此旋转器正确地集成到现有的jQuery中？

Answer 1

问题在于Isotope在现代浏览器中使用transform属性进行布局，在设置旋转时要重置。

您最好的选择是在Isotope中禁用'transformsEnabled'选项，强制它使用顶部/左侧绝对位置，这将释放旋转的转换属性。

http://isotope.metafizzy.co/docs/options.html#transformsenabled

将同位素与随机旋转相结合

1 个答案: