自定义 tumblr 的新照片集布局

Question

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

我试图弄清楚如何使用 js 数组块根据照片集中的图像数量创建新布局。老实说，我不完全确定这些功能应该如何工作，但如果有人能提供一些答案或教程，我将不胜感激。

Answer 1

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

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

{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+'%')
}

这实际上很丑陋，但它运行...显然可以使用上面描述不同“案例”的代码更优雅地完成，但老实说，我喜欢简单的 % 方法，并且可能会删除案例，只是坚持导航 DOM 以更改宽度。

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

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

将其设为社区 wiki，因为它实际上并不是我的代码，而且这显然是其他人构建的好资源 - 请贡献任何改进。

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