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

Question

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

(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 ) ); 
    }
);
});

对于更大的变化，我尝试将它与这个脚本结合起来，但所有元素都会重叠。

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

$("#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 属性进行布局，您在设置旋转时要重置它。

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

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