How to display data from the database in blocks of different sizes?

L
lyov2015-10-16 19:23:35
PHP
lyov, 2015-10-16 19:23:35
Hello! there is such a problem, I can’t do it in such a way that it would show the blocks in a mosaic and display the data there! here is the code and screenshot
<?php 
        
      
$result = mysql_query("SELECT * FROM nyuter ORDER BY id DESC");


if (!$result)
{
echo "<p> <strong>Код ошибки:</strong></p>";
exit(mysql_error());
}

if (mysql_num_rows($result) > 0)

{
$itog = mysql_fetch_array($result);





do

{

printf ('
                      <div class="wow fadeInUp">
         
                <div class="col-sm-8">
                       <div class="item video">
                    <div class="view">
                    <div class="padding">
                        <a href="view_single.php?id=%s"">
                            <div class="containers" style="width: 100%%; overflow: hidden; height: 406px;">
                               
                        <img src="%s" style="width: 100%%; height: 406px;">
                     

                            <video class="video_show" onmouseover="this.play()" onmouseout="this.pause()" muted loop>
                                    <source  src="product/1.ogg" type="video/ogg; codecs=\'theora, vorbis\'">
                                    <source  src="%s" type="video/mp4; codecs=\'avc1.42E01E, mp4a.40.2\'">
                                    
       
                                </video>
                            </div>
                            <div class="info" >
                                <div class="title">%s</div>
                            </div>
                        </a>
                    </div>
                    </div>
                </div></div></div>
                  <div class="clear"></div>

                <div class="wow fadeInDown">
                  <div class="col-sm-4">
                       <div class="item video">
                    <div class="view">
                    <div class="padding">
                        <a href="view_single.php?id=%s">
                                 <div class="containers" style="width: 100%%; overflow: hidden; height: 200px;">
                               
                        <img src="%s" style="width: 100%%; height: 200px;">
                        
                            <video class="video_show" onmouseover="this.play()" onmouseout="this.pause()" muted loop>
                                    <source  src="product/1.ogg" type="video/ogg; codecs=\'theora, vorbis\'">
                                    <source  src="%s" type="video/mp4; codecs=\'avc1.42E01E, mp4a.40.2\'">
                                    
       
                                </video>
                            </div>
                            <div class="info" >
                                <div class="title">%s</div>
                            </div>
                        </a>
                    </div>
                    </div>
                </div></div></div>
                
                <div class="wow fadeInDown">
                  <div class="col-sm-4" style="float:left;">
                       <div class="item video">
                    <div class="view">
                    <div class="padding">
                        <a href="view_single.php?id=%s">
                            <div class="containers" style="width: 100%%; overflow: hidden; height: 200px;">
                               
                        <img src="%s" style="width: 100%%; height: 200px;">

                            <video class="video_show" onmouseover="this.play()" onmouseout="this.pause()" muted loop>
                                    <source  src="product/1.ogg" type="video/ogg; codecs=\'theora, vorbis\'">
                                    <source  src="%s" type="video/mp4; codecs=\'avc1.42E01E, mp4a.40.2\'">
                                    
       
                                </video>
                            </div>
                            <div class="info" >
                                <div class="title">%s</div>
                            </div>
                        </a>
                    </div>
                    </div>
                </div></div></div>
                
                     
                     
                     <div class="col-sm-12"></div>
                         <div class="wow fadeIn">
                
                 <div class="col-sm-3" style="float:left;">
                       <div class="item video">
                    <div class="view">
                    <div class="padding">
                        <a href="view_single.php?id=%s">
                            <div class="containers" style="width: 100%%; overflow: hidden; height: 150px;">
                               
                        <img src="%s" style="width: 100%%; height: 150px;">

                            <video class="video_show" onmouseover="this.play()" onmouseout="this.pause()" muted loop>
                                     <source  src="product/1.ogg" type="video/ogg; codecs=\'theora, vorbis\'">
                                    <source  src="%s" type="video/mp4; codecs=\'avc1.42E01E, mp4a.40.2\'">
                                    
       
                                </video>
                            </div>
                            <div class="info" >
                                <div class="title">%s</div>
                            </div>
                        </a>
                    </div>
                    </div>
                </div></div></div>
                
                <div class="wow fadeIn">
                <div class="col-sm-3" style="float:left;">
                       <div class="item video">
                    <div class="view">
                    <div class="padding">
                        <a href="view_single.php?id=%s">
                            <div class="containers" style="width: 100%%; overflow: hidden; height: 150px;">
                               
                        <img src="%s" style="width: 100%%; height: 150px;">

                            <video class="video_show" onmouseover="this.play()" onmouseout="this.pause()" muted loop>
                                     <source  src="product/1.ogg" type="video/ogg; codecs=\'theora, vorbis\'">
                                    <source  src="%s" type="video/mp4; codecs=\'avc1.42E01E, mp4a.40.2\'">
                                    
       
                                </video>
                            </div>
                            <div class="info" >
                                <div class="title">%s</div>
                            </div>
                        </a>
                    </div>
                    </div>
                </div></div></div>
                
                <div class="wow fadeIn">
                <div class="col-sm-3" style="float:left;">
                       <div class="item video">
                    <div class="view">
                    <div class="padding">
                        <a href="view_single.php?id=%s">
                            <div class="containers" style="width: 100%%; overflow: hidden; height: 150px;">
                               
                        <img src="%s" style="width: 100%%; height: 150px;">

                            <video class="video_show" onmouseover="this.play()" onmouseout="this.pause()" muted loop>
                                     <source  src="product/1.ogg" type="video/ogg; codecs=\'theora, vorbis\'">
                                    <source  src="%s" type="video/mp4; codecs=\'avc1.42E01E, mp4a.40.2\'">
                                    
       
                                </video>
                            </div>
                            <div class="info" >
                                <div class="title">%s</div>
                            </div>
                        </a>
                    </div>
                    </div>
                </div></div></div>
                <div class="wow fadeIn">
                <div class="col-sm-3" style="float:left;">
                       <div class="item video">
                    <div class="view">
                    <div class="padding">
                        <a href="view_single.php?id=%s">
                            <div class="containers" style="width: 100%%; overflow: hidden; height: 150px;">
                               
                        <img src="%s" style="width: 100%%; height: 150px;">

                            <video class="video_show" onmouseover="this.play()" onmouseout="this.pause()" muted loop>
                                     <source  src="product/1.ogg" type="video/ogg; codecs=\'theora, vorbis\'">
                                    <source  src="%s" type="video/mp4; codecs=\'avc1.42E01E, mp4a.40.2\'">
                                    
       
                                </video>
                            </div>
                            <div class="info">
                                <div class="title">%s</div>
                            </div>
                        </a>
                    </div>
                    </div></div>
                </div> </div>',$itog ['id'],$itog ['nkar'],$itog ['videomp'],$itog ['anun'],$itog ['id'],$itog ['nkar'],$itog ['videomp'],$itog ['anun'],$itog ['id'],$itog ['nkar'],$itog ['videomp'],$itog ['anun'],$itog ['id'],$itog ['nkar'],$itog ['videomp'],$itog ['anun'],$itog ['id'],$itog ['nkar'],$itog ['videomp'],$itog ['anun'],$itog ['id'],$itog ['nkar'],$itog ['videomp'],$itog ['anun'],$itog ['id'],$itog ['nkar'],$itog ['videomp'],$itog ['anun'],$itog ['id'],$itog ['nkar'],$itog ['videomp'],$itog ['anun']);


}

while ($itog = mysql_fetch_array($result));
 
}

else
{
echo "<p>Информация по запросу не может быть извлечена в таблице нет записей.</p>";

}
        
       ;?>
Reply
Answer the question
In order to leave comments, you need to log in
1 answer(s)
J
javanub, 2015-10-16
@javanub
I didn't read your code. But looking at the picture, you can say that css will help you. In the figure, these are li-shki and set each nth-child and the desired properties