更新容器中的项目位置

Question

所以我试图将结果拉到主容器的顶部而不是像第一张图片一样显示。他们是使用jQuery做到这一点的方法吗？当你从列表中选择一个项目时，有点像刷新事物。或者甚至用css这样做的方法也许，我不认为它可能。提前谢谢。

您可以在http://nathanielmignotte.ca/Work/GridGallery/

查看

Answer 1

我不确定你想要实现什么，但如果你想在复选框改变时执行某些JS，你可以使用这个jQuery：

$('input[type="checkbox"]')
.on('change', function(e){
    //do stuff
    //if you'd like to know whether the checkbox is checked
    var thisCheckboxIsChecked = $(this).is(':checked');
});

要移动div#grid-gallery，您应首先将其设为CSS position至relative。然后，您首先需要初始高度div#grid-gallery并存储它以便于访问：

var gallery = $('#grid-gallery'),
    initGalleryHeight = gallery.height();

现在创建一个可以被称为

的函数

var changeGalleryHeight = function(){
    var curGalleryHeight = gallery.height(),
        diff = curGalleryHeight - initGalleryHeight;

    //set the new top-offset
    gallery.css('top', diff + 'px');
};

如果您在复选框change上调用该功能，则您将全部设置。

修改

首先：将position的{​​{1}}设置为div#grid-gallery。否则事情就不会发生了。

这是relative中line 97的代码：

main.js

将其更改为：

var gallery = $('#grid-gallery'),
    initGalleryHeight = gallery.height();

function changePos(){

    var changeGalleryHeight = function(){

        var curGalleryHeight = gallery.height(),
            diff = curGalleryHeight - initGalleryHeight;

        //set the new top-offset
        gallery.css('top', diff + '500px');

    };
}

现在已完成所有必须完成的工作是在复选框更改时调用var gallery = $('#grid-gallery'), initGalleryHeight = gallery.height(), changeGalleryHeight = function(){ var curGalleryHeight = gallery.height(), diff = curGalleryHeight - initGalleryHeight; //set the new top-offset gallery.css('top', diff + 'px'); }; ：

changeGalleryHeight()

Answer 2

我认为您可以使用metafizzy网站上的 isotope.js ，它有许多功能，例如过滤，排序......元素列表，它会让您选择的元素始终保持在顶部你想要的。