构造一个带有水平滚动条的面板

Question

我在 twig 上有一个由我的代码生成的图像列表：

<div class="text-left row">
    <div class="large-12 small-12 columns panel_profile">
    {% for adUser in ad.interestedUsers %}
        {% if adUser.pictureUrl is not empty %}
            <img class="img_interested" id='idPicture_{{ adUser.id }}' src="{{ asset(adUser.getPictureWeb) }}" style="height: 50px; width: 50px;"/>
{% else %}
            {% image 'bundles/delivveweb/images/icon_perfil.png' %}
            <img id='idPicture' src="{{ asset_url }}" style="height: 50px; width: 50px;"/>
            {% endimage %}
        {% endif %}
    {% endfor %}
    </div>
</div>

我的想法是构建一个包含 26 张照片的面板，每行 13 张。当图数大于26的时候，我想水平调出一个rologem栏，可以看到另一个头像

我的前端一直在使用 foundation-5。

任何人都可以帮助我或知道任何 API 已经这样做了吗？ abaio有代码pa帮助说明

code

Answer 1

首先通过 <li>

更改我在 twig 上的代码以生成包含两个图像的列表

 <div class="large-12 small-12 columns horizontal-scroll-panel">
        <ul>
        {% for adUser in ad.interestedUsers %}
            {% if loop.index is divisible by(2) %}
                <br>
            {% else %}
                <li>
            {% endif %}
                {% if adUser.pictureUrl is not empty %}
                    <img class="img_interested" id='idPicture_{{ adUser.id }}' src="{{ asset(adUser.getPictureWeb) }}" style="height: 50px; width: 50px;"/>
                {% else %}
                    {% image 'bundles/delivveweb/images/icon_perfil.png' %}
                        <img id='idPicture' src="{{ asset_url }}" style="height: 50px; width: 50px;"/>
                    {% endimage %}
                {% endif %}
                </li>
            {% endfor %}
        </ul>
    </div>

然后我不得不在 css 中做一些改变以确保放置 scroll-x 的 div 的大小，并在 <ul> 中授予尺寸 <li> 和 <img>

<style>
    .horizontal-scroll-panel {
          width: 600px;
          height: 100px;
          background-color: #ccc;
          padding-bottom: 20px;
          overflow-x: hidden;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          -ms-overflow-style: -ms-autohiding-scrollbar;
          overflow-y: hidden !important;
          overflow-x: auto;
        }
        .horizontal-scroll-panel > ul {
          list-style: none;
          margin: 0;
          padding: 0;
          -webkit-padding-start: 0;
          font-size: 0;
        }
        .horizontal-scroll-panel li {
          display: inline-block;
          border: solid 1px #666;
          box-shadow: 0 0 4px #666;
          width: 50px;
          height: 100px;
          overflow: hidden;
          margin-right: 0px;
          font-size: 0;
        }
        .horizontal-scroll-panel li:first-of-type {
          margin-left: 0 !important;
        }
        .horizontal-scroll-panel li:last-of-type {
          margin-right: 0 !important;
        }
        img {
          height: 50px !important;
          width: 50px !important;
          border: 1px solid red !important;
        }
        [dir=rtl] .horizontal-scroll-panel li {
          margin-right: 0 !important;
          margin-left: 0px !important;
        }
        [dir=rtl] .horizontal-scroll-panel li:first-of-type {
          margin-right: 0 !important;
        }
        [dir=rtl] .horizontal-scroll-panel li:last-of-type {
          margin-left: 0 !important;
        }

        @media only screen and (max-device-width: 320px) {
          .horizontal-scroll-panel {
            height: 125px;
            padding: 10px;
          }
          .horizontal-scroll-panel li {
            height: 125px;
            width: 125px;
          }
          .horizontal-scroll-panel img {
            height: 125px !important;
          }
        }
</style>

最后还有秘诀就是让<li>生成的默认列表变成水平列表

<script>
$(function() {
      $.fn.extend({
        UIHorizontalScrollPanel : function () {
          return this.each(function() {
            var scrollPanel = $(this).find('ul');
            var panelsWidth = 0;
            scrollPanel.find('li').each(function(_, ctx) {
                panelsWidth += parseInt($(ctx).outerWidth(true));
            });
            var parentPadding = (parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right')));
            scrollPanel.css('width', (panelsWidth + (parentPadding + parentPadding / 2)));
          });
        }
      });
      $('.horizontal-scroll-panel').UIHorizontalScrollPanel();
    });
</script>

Function and class that builds a list of images horizontally

构造一个带有水平滚动条的面板

Construct a panel with horizontal scroll bar

html

css

jquery

twig

zurb-foundation-5