Jquery 元素的对齐和视差移动

我正在尝试做一些像下面的图片所示的事情

解释如下：

我有一个最大宽度为1920像素的div。在那里我有一个8列的网格。在这里，我想对齐所有元素（带换行链接的div），从中间到左侧和右侧。红色元素就在那里。但是，现在我的问题来了，蓝色的需要稍微移动一点，带有一些上下视差的效果

红色元素目前不是问题（除了页边顶部：-100px在缩放窗口时看起来像垃圾）。但是我不能让蓝色的显示在正确的位置，然后用视差移动它们

重要提示：所有元素都是从数据库动态添加的。所以我不能只做元素指定的定位。

现在，这是一个元素的代码：

<a href="#" class="work-elem-link">
   <div class="work-elem-content span2 fposrh">
      <div class="work-elem" data-pos="210" data-move="elem-fix">
          <div class="work-elem-img" data-img="1f-h_r">
              <img class="work-elem-imgtag" src="" style="visibility:hidden"/>
          </div>
      </div>
      <div class="work-elem-details">
          <div class="work-elem-details-title">TITLE</div>
      </div>
   </div>
</a>

正如你所看到的，我正在尝试不同的事情，但看不出我的问题所在。如果有人能帮我，那就太好了。我知道我的问题的内容看起来很大，但它甚至没有那么复杂。我只是尽量把我的问题写清楚

---

提前感谢对于这样的图形，我会让

清除
和
浮动
并设置DIV容器位置，包括
左
，
顶
，
右
和
底
或
左
，
顶
宽
和
高
。重要提示：设置所有DIV容器
display:block。
如果您从一个数据库创建了一些动态数据，它正在移动或获得了其他运行时效果，那么您需要Javascript来设置CSS属性

<script>

var e = document.getElementById('divId');

e.style.display = 'block';
e.style.left = '50px';
e.style.top = '20%';
...

</script>


var e=document.getElementById（'divId'）；
e、 style.display='block'；
e、 style.left='50px'；
e、 style.top='20%'；
...

使用变量值（'block'，'50px'）来设置新属性。
谢谢，但目前我发现响应工作和所有这些定位存在一些问题。另一个问题是，我没有一个解决方案来为蓝色和移动元素进行定位。
<script>

var e = document.getElementById('divId');

e.style.display = 'block';
e.style.left = '50px';
e.style.top = '20%';
...

</script>