Php – Randomly Shuffle Columns (HTML & CSS)

| Tutorial, WordPress, PHP | By

You can easily shuffle your blog post column by using below php shuffle script. Every time when you refresh the page, you are able to see the random shuffling of your blog post columns. Step-1

PHP shuffle script

<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/QAPage">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<?php
$site = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];  $column1 = '<section class="content" style="background: #ffe0fa;">
<a href="https://blogwings.com/how-to-change-the-product-image-dimension-in-woocommerce/"><img src="https://i1.wp.com/blogwings.com/wp-content/uploads/2017/05/Woo-product-dimension-1.png"></a>
<h2>1st Content Area</h2>
<p>This page demonstrates a 3 column responsive layout, complete with responsive images and jquery slideshow.</p>
</section>';
$column2 = '<section class="content" style="background: #aae6ff;">
<a href="https://blogwings.com/integrate-amp-wordpress-blog/"><img src="https://i0.wp.com/blogwings.com/wp-content/uploads/2017/04/Guest-blogging-post-image.png"></a>
<h2>2nd Content Area</h2>
<p>At full width all three columns will be displayed side by side. As the page is resized the third column will collapse under the first and second. At the smallest screen size all three columns will be stacked on top of one another.</p>
</section>';
$column3 ='<section  class="content" style="background: #f7f7f7;">
<a href="https://blogwings.com/fix-error-font-icons-not-showing-site/" ><img src="https://i1.wp.com/blogwings.com/wp-content/uploads/2017/04/Font-icons.jpg"> </a>
<h2>3rd Content Area</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</section>';
$column4 = '<section  class="content" style="background: #ffe8b8;">
<a href="https://blogwings.com/image-upload-ajax-jquery-php-script/" ><img src="https://i0.wp.com/blogwings.com/wp-content/uploads/2017/07/ajax-file-uploader.png"></a>
<h2>4th Content Area</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</section>';  $column = array($column1,$column2,$column3,$column4);
shuffle($column);  $print_column = '';
$i = 0;
foreach($column as $key=>$value){
if($i==3) break;
$print_column .= $value;
$i++;
}  ?>
<div id="bwwrap">
<header>
<h1>Php - Shuffle and Random Columns (HTML/Css)</h1> <a href="<?php echo $site; ?>">Shuffle</a>
</header>
<?php echo $print_column; ?>
</div>
</body>



Step-2


CSS style


  body {
font-family: 'Open Sans', sans-serif;
color: #666;
}  #bwwrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}
header {
height: 100px;
padding: 0 15px;
}
.content{
width: 290px;
float: left;
padding: 5px 15px;
}  section.content img {
width: 290px;
}
/* for 980px or less */
@media screen and (max-width: 980px) {  #bwwrap {
width: 94%;
}
.content {
width: 41%;
padding: 1% 4%;
}
section.content img{
width: 41%;
}  header {
padding: 1% 4%;
}
}  /* for 700px or less */
@media screen and (max-width: 600px) {  .content {
width: auto;
float: none;
}
}
/* for 480px or less */
@media screen and (max-width: 480px) {
header {
height: auto;
}
h1 {
font-size: 2em;
}
}
header, .content {
margin-bottom: 5px;
}
header {
border: solid 1px #ccc;
}



DemoDownload   Final Words:– I hope my tutorial will help you. If you have another query related to this blog just post your comment below.


Read More –

Written by

Add a Comment or Review

Your email address will not be published. Required fields are marked *