使用jquery mobile和modulus构建动态网格

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 - 是你的第二个专栏
• 等。

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

使用将为您提供字符a，然后在添加列时为其他字符增加86。