Question

有时在此页http://www.georidersmtb.com/tours/上刷新框时，框元素会相互重叠。看起来容器上的高度没有正确设置。我在页面循环中加载shufflejs会有所不同吗？目前它被加载到页脚。

   //shuffle
    var $grid = $('#grid'),
        $sizer = $grid.find('.shuffle__sizer');
    $grid.shuffle({
        itemSelector: '.picture-item',
        sizer: $sizer
    });
    $('#sub-bike').hide();
    $('.sort-options').on('change', function() {
        var sort = this.value.toLowerCase();
        if (sort == 'bike') {
            $('#sub-bike').show();
        } else {
            $('#sub-bike').hide();
        }
        $grid.shuffle('shuffle', function($el, shuffle) {
            // console.log(sort);
            if (sort == '') {
                return $el.data('type');
            } else {
                return $el.data('type') === sort;
            }
        });
    });
    $('#sub-bike').on('change', function() {
        var sort = this.value.toLowerCase();
        $grid.shuffle('shuffle', function($el, shuffle) {
            // console.log(sort);
            if (sort == '') {
                return $el.data('type') === 'bike';
            } else {
                return ($el.data('subtype') === sort && $el.data('type') === 'bike');
            }
        });
    });




<select class=" form-control sort-options">
            <option value="">Default</option>
            <option value="bike">Bike</option>
            <option value="city">City</option>
        </select>
        <select id="sub-bike" class=" form-control">
            <option value="">Default</option>
            <option value="day-trip">Day Trip</option>
            <option value="full-tour">Full Tour</option>
        </select>
        <div id="grid">
            {% for tour in tours %} 

                <figure style="margin-bottom:20px !important; " class="col-xs-12 col-sm-6 col-md-4 picture-item" data-groups='["{{tour.type|lower }}"]' data-type="{{tour.type|lower }}" data-subtype="{{tour.subtype|lower}}">
                    <a href="/tour/georgia/{{tour.alias}}/"><img src="/img/background_images/thumb-{{tour.background_image|default('na.png') }}" class="my-thumb-class img-responsive" alt="Image for {{tour.title}}" />
                    <div class="picture-item__details">
                        <figcaption class="picture-item__title">
                        <h2 style="color:white;" class="article-h2">{{tour.name}}</h2>
                            </figcaption>
                            <p class="picture-item__tags">
                                {{tour.date|date(("m/d/Y"))}}
                            </p>
                        </div>
                    </a>
                    </figure>
                {% endfor %}
            </div>
        </div></div>

Answer 1

这个问题在shufflejs网站上提出，解决方案是使用http://imagesloaded.desandro.com/

Shufflejs错误地计算高度

1 个答案: