php - 使用 jquery mobile 和模数构建动态网格

Question

我正在尝试使用 php 和 jquery mobile 构建动态网格。我想知道是否有人可以帮助我使用模数来确定 ui-block- 是否需要根据迭代的键值进行广告。

  <div class="ui-grid-c">
        @forelse($photos as $key=>$photo)

            @if($key == 1)
                <div class="ui-block-a">                                
                    <img src="{{ $photo['file'] }}" width="60" />
                </div>
            @elseif($key == 2)
                <div class="ui-block-b">                                
                    <img src="{{ $photo['file'] }}" width="60" />
                </div>
            @elseif($key == 3)
                <div class="ui-block-c">                                
                    <img src="{{ $photo['file'] }}" width="60" />
                </div>
            @elseif($key == 4)
                <div class="ui-block-d">                                
                    <img src="{{ $photo['file'] }}" width="60" />
                </div>  
            @endif

        @empty

            Nothing Found

        @endforelse
    </div>

我尝试了几种不同的模数变化，但没有任何效果。任何帮助，将不胜感激。

Answer 1

您需要根据列数将 ui-grid-c 类修改为动态的。

• ui-grid-a = 2 列
• ui-grid-b = 3 列
• ui-grid-c = 4 列
• 等等。

为您的专栏..

• ui-block-a - 是您的第一列
• ui-block-b - 是你的第二个列
• 等等。

因此，您需要跟踪在列中添加的次数，然后添加字母。

Using 会给你字符 a ，然后在你添加列时为其他字符增加 86 。