社交网络共享按钮根据共享的数量和社交网络的数量设置为基于百分比的高度？

Question

我想为WordPress网站构建一个社交网络共享模块，该模块看起来与下图相似......

我可以获得与JavaScript或PHP共享页面的次数的社交数量，还没有确定我要去哪条路线但是尽可能简单，我需要一些帮助确定百分比以在CSS中为这些网络设置高度。

有人可以向我展示为获得每个社交网络的百分比而需要执行的基本数学，这样我就可以显示每个社交网络的大小，与所有网络上的合并份额总数成比例。

示例图像显示该页面在4个社交网络中拥有221个共享。然后，我将获得每个网络的份额数。

我需要为每个网络获取一个百分比，以便我可以在该值上设置Div的大小。

这看起来似乎不是一个编程问题，但它是，所有数学都将以编程方式完成，我只知道如何做所有其他组件，所以现在不需要发布该代码。

以下是图像中数据的当前值，这也是令人困惑的，因为它显然加起来远高于100％......

Twitter: height: 89%;
Google+: height: 26%;
Facebook: height: 57%;
LinkedIn: height: 28%;

Answer 1

您只需要一些基本数学，您希望在社交媒体上显示所有分享的百分比使用率。顺便说一句好主意。您必须在所有网络上编制所有共享操作。

像这样：

Twitter: 5, Facebook: 3, LinkedIn: 1;
comulated: 9.
Percentages: 
(5/9)*100 = 55.55%
(3/9)*100 = 33.33%
(1/9)*100 = 11.11%

现在我们知道了，我们可以转向我们的CSS。我们知道每个元素的百分比，但我们可以将它与什么相关？我们需要一个新的价值。社交项目的父元素的高度。

让我们知道这个html：

<div class="social-parent">
    <div class="social-item twitter"></div>
    <div class="social-item facebook"></div>
    <div class="social-item linkedin"></div>
</div>

这个CSS：

.social-parent
{
    /* this is 100% for the elements */
    height: 300px;
    background-color: lightgray;
}

.social-item
{
    display: inline-block;
    width: 30px;
    background-color: blue;
    margin-right: 10px;
}

我们现在可以设置元素相对于父容器高度的高度。我们可以这样做，就像你用php或javascript说的那样。这是一个用JS做的非常俗气的方法：

var socialEngagement = {};
socialEngagement.twitter = "55.55%";
socialEngagement.facebook = "33.33%";
socialEngagement.linkedin = "11.11%";

document.querySelector(".social-item.twitter").style.height = socialEngagement.twitter;
document.querySelector(".social-item.facebook").style.height = socialEngagement.facebook;
document.querySelector(".social-item.linkedin").style.height = socialEngagement.linkedin;

以下是结果的演示： http://jsfiddle.net/br8rfpLm/1/