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

Question

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

  <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。