javascript – 嵌套砌体对象

2023年7月29日 219次阅读

我正在尝试使用容器创建图表视图.所以如果：[A的 – > B’s – > C’s]视图将显示在As内部的Bs内的对象c.

像这样的东西：

我认为砌体视图是完美的,但我不能让嵌套工作正常.

到目前为止我所掌握的小提琴：http://jsfiddle.net/paulocoelho/5SxQ5/4/

我不明白为什么他们不会吝啬.我也尝试使用CSS的列数和列间隙,但发现渲染非常错误.

小提琴代码因为我必须……

var $container = $('.container');
$container.masonry({
    /*columnWidth: 200,*/
    itemSelector: '.eWrapper'
});

最佳答案 考虑一下.

删除itemSelector属性 – 如果设置了一个,Masonry将不仅使用子项,而且使用与该选择器匹配的所有后代.因此,对于第一个容器(motherContainer),Masonry将尝试布局所有.wrapper元素,包括嵌套.container元素中的元素.

关键点 – 在恢复的.container元素数组上调用Masonry.从最里面到最外层,因为砌体改变了子元素的高度,在父容器中留下了空白.

var $container = $('.container');
$($container.get().reverse()).masonry({});

试一试吧.这是一个jsfiddle.
我还添加了C元素.

点赞