javascript - Jquery Isotope PLugin：自定义布局模式：类别行 - 如何为每个类别行添加标题

Question

我正在尝试自定义 Isotope jquery 插件 David DeSandro 但没有得到任何地方....

我正在尝试添加类别名称作为自定义布局的标题：类别行

这是 David DeSandro 网站上自定义布局的链接：http: //isotope.metafizzy.co/v1/custom-layout-modes/category-rows.html

所以我希望它与示例完全相同，但只是在相应行上方有每个类别的名称。

同位素甚至可能吗？

欢呼并感谢您宝贵的时间！

Answer 1

in short, i inserted for each category a div with a header class to the elements, gave that class the style for the header, which is the complete length of the container and some smaller height and put in the div the content for the header.
then simply applied the layoutMode.
categories is an object with the category infos.

var h = '';
$.each(categories,function(i,v) {
                //insert header row
                if($('.element.'+v.code).length){
                    h = h+'<div class="element category header '+v.type+'" data-type="'+v.type+'" data-category="'+v.code+'"><img src="'+v.icon+'"> '+v.title+'</div>';
                }
            });
            $container.isotope('insert',$(h));
            $container.isotope( {
                sortBy : $(this).attr('data-sort'),
                sortAscending : false,
                layoutMode: categoryRows,
                categoryRows : {
                    gutter : 2
                }
            });

i tried also the callback of the insert here, but that seem to flicker more then without.

but you have to think of way more:

• get the header row above the elements when sortAscending is true
• removing the header, when applying another LayouMode (there the missing remove callback hurts, but setTimeout does it)
• dont add the header again, if its already there

im still elobarating, but that would be my approach for now