0

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

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

4

1 回答 1

0

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

我正在使用在 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;
}

使它成为一个社区维基，因为它不是我的代码，这显然是其他人构建的一个很好的资源 - 请贡献任何改进。

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

于 2014-04-25T12:30:43.007 回答