Question

环顾四周后，我发现了一个很好的教程，如何应用Pinterest布局样式，教程link

超过4个小时的样式并修改它以适合我的布局，在完成所有这些工作之后我将我的html代码和我的所有css和js复制到我的mvc 5项目中，我让我的infinitescroll通过ajax工作，但在应用Pinterest之后风格滚动事件不会火！我认为因为所有div都被设置position:absolute; 这是我的标记。

加价

<div id="MainContainer" class="container-fluid">
             <div class="col-md-4 col-lg-3 col-sm-4 col-xs-6 block">
            <div class="jumbotron">
                <div class="jumbotron-photo">
                    <a href="#"><img src="img/Jumbotron.jpg" height="245px"></a>
                </div>
                <div class="jumbotron-contents">
                    <h1><a href="#">Titile...</a></h1>
                    <p class="the-date">4 April 2014</p>
                    <p>Content...</p>
                </div>
            </div>
        </div>
</div>

CSS

.block {
    position: absolute;
}

的js

function setupBlocks() {
var colCount = 0;
var colWidth = 0;
var margin = 12;
var marginButtomPercent = 0.08;
var windowWidth = 0;
var blocks = [];
var Container = $('#MainContainer');
windowWidth = Container.width();
var margT = Container.outerWidth(true) - Container.outerWidth();
colWidth = $('.block').width();
colCount = Math.floor(windowWidth / (colWidth + margin));

for (var i = 0; i < colCount; i++) {
    blocks.push(margin);
}

$('.block').each(function () {
    var min = Array.min(blocks);
    var index = $.inArray(min, blocks);
    var leftPos = (margin + (margT / 2)) + (index * (colWidth + margin));

    $(this).css({
        'left': leftPos + 'px',
        'top': min + 'px'
    });
    var outerHeight = $(this).outerHeight();
        blocks[index] = min + outerHeight + margin + (outerHeight * marginButtomPercent);
    });
}

应用pinterest布局样式后滚动事件不会触发？

0 个答案: