Question

我正在尝试在 layout

之类的地方安排Freewall布局

这是我正在使用的代码的小提琴（在JSfiddle中无法正常运行 - 可能是因为窗口大小）

我正在尝试使用此http://vnjs.net/www/project/freewall/example/nested-grid.html作为示例。

这是HTML

    <div id="guide" >
           <div id = "sceneText" class="sceneText block">
               This is a big block of text
            </div>
           <div id = "contents" data-nested=".level-1"  data-gutterX=10 data-gutterY=10 data-cellW=0.5 data-cellH=0.5>
                <div class="contents block level-1" />
                <div class="contents block level-1" />
                <div class="contents block level-1" />
            </div>   
            <div id = "section"  class="section block" data-nested=".level-1" data-gutterX=10 data-gutterY=10 data-cellW=0.5 data-cellH=0.5 >
                <div class="sectionTitle block level-1" />
                <div class="guideScene level-1" />
                <div class="guideScene level-1" />
                <div class="guideScene level-1" />
                <div class="guideScene level-1" />
            </div>   
             <div id = "section"  class="section block" data-nested=".level-1" data-gutterX=10 data-gutterY=10 data-cellW=0.5 data-cellH=0.5 >
                <div class="sectionTitle block level-1" />
                <div class="guideScene level-1" />
                <div class="guideScene level-1" />
                <div class="guideScene level-1" />
                <div class="guideScene level-1" />
            </div>   
             <div id = "section"  class="section block" data-nested=".level-1" data-gutterX=10 data-gutterY=10 data-cellW=0.5 data-cellH=0.5 >
                <div class="sectionTitle block level-1" />
                <div class="guideScene level-1" />
                <div class="guideScene level-1" />
                <div class="guideScene level-1" />
                <div class="guideScene level-1" />
            </div>   
        </div>

这是脚本

    $(function() {
            $("#guide").each(function() {
         $(function() {
                var wall = new freewall("#guide");
                wall.reset({
                    selector: '.section',
                    cellW: 200,
                    cellH: 200,
                    fixSize: 5,
                    gutterY: 20,
                    gutterX: 150,
                    animate: true
                });

                wall.reset({
                    selector: '.block',
                    cellW: 200,
                    cellH: 100,
                    gutterY: 20,
                    gutterX: 50,
                    animate: true,
                    onResize: function() {
                        wall.fitHeight();
                    }
                }); 
                wall.fitHeight($('#guide').height());
            });

            $(window).trigger("resize");
        });
});

以下是它实际出现的方式

results

现在我认为代码的质量很差，我不确定每个项目应该是一个'块'，但这是我能让它工作的唯一方法。我希望元素保持分组，但我确信这会在不同大小的屏幕上中断。部分容器应该是块，嵌套项目是否为-1，如示例所示？

我坚持的两件事

各部分之间的沟槽，如何在部分组之间添加空间？
节标题 - 理想情况下我希望这些标题高30px，但是当我在CSS中执行此操作时，背景会消失。我知道freewall代码覆盖了这个，我怎样才能设置不同的高度？

Answer 1

秘密在于这些数字

data-gutterX = 10 data-gutterY = 10 data-cellW = 0.5 data-cellH = 0.5

FreeWall嵌套网格故障

1 个答案: