javascript - Jquery 同位素插件 : Custom layout mode: Category rows - how to add a header to each category row

Question

我正在尝试自定义 Isotope jquery 插件 David DeSandro，但没有成功....

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

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

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

Isotope 甚至可能吗？

干杯，感谢您抽出宝贵的时间!

Answer 1

简而言之，我为每个类别插入一个带有标题类的 div 元素，为该类提供标题样式，即容器的完整长度和一些较小的高度，并将内容放入 div header 。
然后简单地应用布局模式。
categories 是一个包含类别信息的对象。

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

我也尝试了插入的回调，但似乎比没有插入时闪烁得更多。

但你必须想得更多:

• 当 sortAscending 为真时获取元素上方的标题行
• 在应用另一个 LayouMode 时删除标题(缺少删除回调会造成伤害，但 setTimeout 会这样做)
• 如果标题已经存在，请不要再次添加标题

我还在阐述，但那是我现在的方法