Question

我正在尝试使用tumblr的自定义photoset布局。我在这里查看这篇文章的一些文档：http://staff.tumblr.com/post/7615038792/photoset-redux

我正在试图弄清楚如何使用js数组块根据photoset中有多少图像来创建新的布局。说实话，我不完全确定这些功能应该如何工作，但如果有人可以提供一些答案或教程，我将非常感激。

Answer 1

我在pastebin上找到了一些代码，这似乎是你在这里寻找的

我使用稍微杂乱的代码（但提供了工作的CSS / HTML），出土on Github Gists将图像划分为行，

{block:Photoset}
    <script type="text/javascript">
        var layout = {JSPhotosetLayout};
        var photocount = 0;
        var photoclass = '', photos = [];
        for(var i=0;i<layout.length;i++) {
            switch(layout[i]) {
                case "1":
                    photoclass = 'col-lg-12';
                    break;
                case "2":
                    photoclass = 'col-lg-6';
                    break;
                case "3":
                    photoclass = 'col-lg-4';
                    break;
                case "4":
                    photoclass = 'col-lg-3';
                    break;
            }
            for(var j=0; j < parseInt(layout[i]); j++) {
                photos[photocount] = {
                    'class': photoclass,
                    rowsize: parseInt(layout[i])
                };
                photocount++;
            }
        }
        photocount = 0;
        var rowcount = 0;
    </script>

    {block:Photos}
        <script>
            if(rowcount == 0) {
                document.write('<div class="row">');
            }
        </script>

        <div id="photosetphoto" class="col-lg-3">
            <script>
                var photo = document.getElementById('photosetphoto');
                photo.className = photos[photocount].class;
                photo.removeAttribute('id');
                rowcount++;
            </script>
            <div class="thumbnail center">
                        {LinkOpenTag}
                <img src="{PhotoURL-1280}" alt="{PhotoAlt}" class="img-responsive">
                {block:Caption}
                    <div class="caption">
                        {Caption}
                    </div>
                {/block:Caption}
                        {LinkCloseTag}
            </div>
        </div>
        <script>
            if(rowcount == photos[photocount].rowsize) {
                document.write('</div>');
                rowcount = 0;
            }
            photocount++;                                        
        </script>
    {/block:Photos}
    {block:Caption}
        <div class="caption">{Caption}</div>
    {/block:Caption}
{/block:Photoset}

然后它只需要一点点添加Javascript就可以调整图像的大小，无论是给照片集的总宽度的百分比

var photosetPics = document.querySelectorAll('div.col-lg-6 div.thumbnail img')
    for (i=0;i<photosetPics.length;i++) {
      var rowLength = photosetPics[i].parentNode.parentNode.parentNode.querySelectorAll('div div.thumbnail img').length;
      photosetPics[i].parentNode.parentNode.setAttribute('style','width:'+100/rowLength+'%')
}

实际上它实际上非常丑陋，但它运行...使用上面的代码可以更清楚地完成它，它描述了不同的情况＆＃34;但说实话，我喜欢简单的％方法，可能会删除案例，只是坚持导航DOM来改变宽度。

最后，你需要让这些div内联（display:inline-block在我测试时没有效果），

div.col-lg-12, div.col-lg-6, div.col-lg-4, div.col-lg-3 {
  float: left;
}

将此作为社区维基，因为它不是我的代码，这显然是其他人可以利用的良好资源 - 请提供任何改进。

值得注意的是，这不会像Tumblr那样在仪表板上切断图像的高度（这适合我，但可能不是其他人想要的）

定制tumblr的新photoset布局

1 个答案: